Wie Schleife über einen komplexen JSON im Gegenzug in Reactjs?

Question

Ich lerne Reactjs beim Erstellen einer einfachen Anwendung. Ich weiß, das ist sehr einfach und es gibt viele Antworten auf die gleiche Frage, die auf Stackoverflow verfügbar sind. Aber ich bin vielleicht nicht in der Lage, diese zu implementieren, vielleicht wegen der variablen Bereiche. Ich wäre dankbar, wenn mir jemand dabei helfen könnte.

Mein voller Code ist ziemlich komplex und irrelevant für die Frage. Aber bitte beziehen Sie sich auf diese Geige: Full Code. Dies funktioniert auf dem lokalen Server.

Relevante Code:

var localStore = {}; 
// localStore = {"f":{"symbol":"f","quantity":10,"pricePaid":136},"jnj":{"symbol":"jnj","quantity":30,"pricePaid":146}}; 

var SearchStock = React.createClass({ 
... 
render: function() { 
... 
return (// I tried map function in other ways too like [localstore].map and then get its values in similar way as i am getting below. 
{/*localStore.map(function (l, i) { 
    return <tr> 
      <td>{Object.keys(l)[i].symbol}</td> 
      <td>{Object.keys(l)[i].quantity}</td> 
      <td>{Object.keys(l)[i].pricePaid}</td> 
      <td>{Object.keys(l)[i].symbol}</td> 
     </tr> 
})*/} 
{/*for(var x in localStorage){ // This is what i really want to do. 
    return <tr> 
      <td>{x.symbol}</td> 
      <td>{x.quantity}</td> 
      <td>{x.pricePaid}</td> 
      <td>anything</td> 
     </tr> 
}*/} 
{stocks.map(function(l) { // this works. 
    console.log("in return stocks",JSON.stringify(stocks)); 
    return <tr> 
      <td>{l[Object.keys(l)[0]]["name"]}</td> 
      <td>{this.state.quantity}</td> 
      <td>{this.state.pricePaid}</td> 
      <td>{<input type="button" value="View Stock"/>}</td> 
      </tr> 
}, this)} 

Ich weiß nicht, warum Kartenfunktion nicht als Wert in localStore und Aktien funktionierte ähnlich: stocks = [{only one key pair of localStore}]. Ich würde jede Hilfe oder Anleitung, die ich dafür bekommen kann, schätzen.

Answer 1

Sie sollten Object.keys verwenden, um ein Array mit den Schlüsseln localStore zu erhalten und es durchlaufen, um Ihre Daten anzuzeigen.

{Object.keys(localStore).map(function (key) { 
      return <tr key={key}> 
       <td>{localStore[key].symbol}</td> 
       <td>{localStore[key].quantity}</td> 
       <td>{localStore[key].pricePaid}</td> 
       <td>{localStore[key].symbol}</td> 
      </tr> 
})} 

Sie fehlten andere Dinge wie

einen Schlüssel für jedes Kind im Array Geben Sie 1º.

2º Wickeln Sie Ihre <tr> Tags in eine <tbody>. <tr> kann nicht als Kind erscheinen <table>

jsfiddle