json文字列からHTMLをレンダリングして反応させる

Question

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

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; 

Answer 1

：よう

何か。

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> 
     ); 
    } 
} 

マップ関数内でより複雑なHTML構造を使用する場合は、1つのDOMノードにラップする必要があります。 、

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

そしてあなたのrenderメソッド内のメソッドを呼び出す：あなたはそうのようなあなたの記録をレンダリングする別の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> 
       {this.state.records.map(record => (
        <div>{record.attributes.name} {record.attributes.phone}</div> 
       )} 
      </div> 
     </div> 
    ); 
} 

Answer 2

JSON.parseあなたの文字列。その後、不要なフィールドを削除するなど、そのオブジェクトで必要な処理を実行してから、JSON.stringifyをレンダリングできるJSON文字列に戻すことができます。あなたは、各項目のマップ機能と出力JSXを実行することができます

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. 
    ) 
    } 
} 

Answer 3

：

完全なファイルは次のようになります。 dangerouslySetInnerHTMLを使用する代わりに、

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> 
    ) 
}