Rend le HTML à partir d'une chaîne JSON dans react

Question

J'essaie de rendre un objet HTML à partir d'une chaîne JSON que je reçois d'une API. Je suis en mesure d'obtenir le rendu de la chaîne au format HTML avec succès, mais la chaîne JSON complète s'affiche. Je cherche seulement à obtenir des valeurs spécifiques (Phone, Name, Id.) Quel serait le meilleur moyen pour moi d'extraire des valeurs spécifiques de mon tableau JSON et de le formater au format HTML? Je fais référence aux enregistrements par état, mais je ne parviens pas à obtenir une sous-valeur d'enregistrement dans le processus de rendu. 

 

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

Vous pouvez exécuter une fonction de carte et générer le fichier JSX pour chaque élément.

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

N'oubliez pas que si vous souhaitez une structure HTML plus complexe dans la fonction map, vous devez l'envelopper dans un seul nœud DOM.

Le fichier complet ressemblerait à ceci:

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 votre chaîne dans un objet JavaScript. Vous pouvez ensuite effectuer le traitement de votre choix sur cet objet, par exemple en supprimant des champs que vous ne souhaitez pas, puis vous pouvez JSON.stringify dans une chaîne JSON que vous pouvez restituer.

Quelque chose comme:

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

Vous pouvez créer une méthode de rendu séparée qui rendra vos enregistrements comme suit:

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

Et ensuite, appelez la méthode dans votre méthode de rendu, au lieu d’utiliser dangerouslySetInnerHTML, comme suit

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