Extract HTML from json string into reaction

Question

I am trying to display an HTML object from a JSON string that I get from an API. I can get the string to render in HTML, but it shows the entire JSON string. I just want to get specific values ​​(Phone, Name, ID.). What would be the best way to extract specific values ​​from my JSON array and format it in HTML? I mean records by state, but I cannot get any sub-value of the record during the rendering process.

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

You can run the map function and output JSX for each item.

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

Keep in mind that if you need a more complex HTML structure in a map function, you will have to wrap it in a single DOM node.

The full file will look like 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> {this.state.records.map(record => ( <div>{record.attributes.name} {record.attributes.phone}</div> )} </div> </div> ); } 

Answer 2

JSON.parse your string into a JavaScript object. Then you can perform any processing you want on this object, for example, delete fields that you do not need, and then you can JSON.stringify return to the JSON string that you can display.

Sort of:

 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

You can create a separate visualization method that will make your entries like this:

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

And then call the method inside your render method, instead of using dangerouslySetInnerHTML, for example

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