web-dev-qa-db-ja.com

反応でjson文字列からHTMLをレンダリングする

APIから受け取っているJSON文字列からHTMLオブジェクトをレンダリングしようとしています。文字列を取得してHTMLに正常にレンダリングできますが、JSON文字列全体が表示されます。特定の値（電話、名前、ID）を取得することだけを探しています。JSON配列から特定の値を抽出してHTMLでフォーマットするための最良の方法は何ですか？状態でレコードを参照していますが、レンダリングプロセスでレコードのサブ値を取得できません。

Here is the JSON result rendered to HTML I'm getting when running the below code.

class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {



            username: '',
            messages: data.messages
        }
    }

    handleSearch(e) {
        this.setState({username: e.target.value})
    }

    handleChange(evt) {
        this.setState({
            username: evt.target.value.substr(0, 100)
        });

    }

    onLinkClicked() {

        var conn = new jsforce.Connection({serverUrl: 'https://cs63.salesforce.com', accessToken: sessionStorage.getItem('token')})

        var parent = this.state.username
        //console.log(this.state.username)
        conn.sobject("Contact").find({
            LastName: {
                $like: parent
            }
        }, 'Id, Name, Phone'

        ).sort('-CreatedDate Name').
        limit(5).skip(10).execute(function(err, records) {
            if (err) {
                return console.error(err);
            }
            for (var i = 0; i < records.length; i++) {
                var record = (records[i]);
                console.log("Name: " + record.Name); //these are the records I'm trying to render
               console.log("Phone: " + record.Phone);


            } this.setState({records : records})


        }.bind(this));

    }

    render() {
        return (
            <div className='menubox' id='menubox'>
                <div className='searchbar-container'>
                    <form onSubmit={e => e.preventDefault()}>
                        <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>
                        <button type='submit' onClick={this.onLinkClicked.bind(this)}>
                            Search
                        </button>
                    </form>
                   </div>
                <div>
            <div dangerouslySetInnerHTML={ { __html: JSON.stringify(this.state.records) } }></div> //how can I show specific values, isntead of the entire string?
        </div>
    </div>
        )
    }
}
export default menuScreen;
javascriptjsonreactjsrender
10
Joseph Sortino

マップ機能を実行して、各項目のJSXを出力できます。

class menuScreen extends React.Component {

    constructor(props) {
        super(props)

        const data = store.getState();

        this.state = {
            username: '',
            messages: data.messages,
            records: [],
        };
    }

    render() {
        return (
            <div>
                {this.state.records.map(record => (
                    <div>{record.attributes.name} {record.attributes.phone} {record.whatever}</div>
                )}
            </div>
        );
    }
}

Map関数内でより複雑なHTML構造が必要な場合は、それを単一のDOMノードでラップする必要があることに注意してください。

完全なファイルは次のようになります。

render() {
    return (
        <div className='menubox' id='menubox'>
            <div className='searchbar-container'>
                <form onSubmit={e => e.preventDefault()}>
                    <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>
                    <button type='submit' onClick={this.onLinkClicked.bind(this)}>
                        Search
                    </button>
                </form>
            </div>
            <div>
                {this.state.records.map(record => (
                    <div>{record.attributes.name} {record.attributes.phone}</div>
                )}
            </div>
        </div>
    );
}
1
Christian Hain

JSON.parse文字列をJavaScriptオブジェクトに挿入します。その後、不要なフィールドの削除など、そのオブジェクトに対して必要な処理をすべて実行できます。その後、JSON.stringifyレンダリング可能なJSON文字列に戻します。

何かのようなもの：

class BlahBlah extends React.Component {
  constructor() {
    //...some code...
    this.processJson = this.processJson.bind(this)
  }
  //...a lot of code...    
  processJson(json) {
    var object = JSON.parse(json)
    var output = {}
    //for every property you want
    output[property] = object[property]
    return JSON.stringify(output)
  }
  //...a lot more code...
  render() {
    return(
      //...even more code...
      <div dangerouslySetInnerHTML={ { __html: this.processJson(this.state.records) } }></div>
      //...and yet more code.
    )
  }
}
3
Pedro Castilho

次のようにレコードをレンダリングする別のレンダリングメソッドを作成できます。

renderRecords(records) {
  return records.map(r => <div> r.Name, r.Phone</div>);
}

次に、dangerlylySetInnerHTMLを使用する代わりに、renderメソッド内でメソッドを呼び出します。

render() {
    return (
        <div className='menubox' id='menubox'>
            <div className='searchbar-container'>
                <form onSubmit={e => e.preventDefault()}>
                    <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>
                    <button type='submit' onClick={this.onLinkClicked.bind(this)}>
                        Search
                    </button>
                </form>
               </div>
            <div>
        <div>{ this.renderRecords() }</div> 
    </div>
</div>
    )
}
0
Mμ.