Rendern von HTML aus einer JSON-Zeichenfolge in reagieren

Question

Ich versuche, ein HTML-Objekt aus einer JSON-Zeichenfolge rendern, die ich von einer API empfange. Ich kann die Zeichenfolge erfolgreich in HTML rendern, aber es zeigt die gesamte JSON-Zeichenfolge. Ich suche nur nach bestimmten Werten (Telefon, Name, Id.) Was wäre der beste Weg für mich, bestimmte Werte aus meinem JSON-Array zu extrahieren und in HTML zu formatieren? Ich beziehe mich auf Datensätze nach Zustand, aber ich kann keinen Unterwert des Datensatzes im Renderprozess erhalten.

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

Sie können für jedes Element eine Kartenfunktion und Ausgabe der JSX laufen.

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

Denken Sie daran, wenn Sie eine komplexere HTML-Struktur innerhalb des Diagrammfunktion möchten, müssen Sie es in einem einzelnen DOM-Knoten wickeln müssen.

Die vollständige Datei würde wie folgt aussehen:

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 Zeichenfolge in ein Objekt JavaScript. Sie können dann die von Ihnen gewünschte Verarbeitung für dieses Objekt ausführen, z. B. Felder entfernen, die Sie nicht möchten, und dann können Sie sie in eine JSON-Zeichenfolge zurückgeben, die Sie rendern können (JSON.stringify).

Etwas wie:

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

Sie Methode macht eine separate erstellen könnten, die Ihre Einträge wie so machen werden:

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

Und dann rufen Sie die Methode in Ihrer Render-Methode, anstelle der Verwendung von dangerouslySetInnerHTML, so

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