Erste json-Objekt-Daten mit reagieren

Ich bin versucht zu ziehen die Daten aus der json wie diese, die importiert werden, als "Werte"

{
  "content": {
      "person": [
        {
          "name": "Test"
          "age" : "24:
        }
    ]
 }
}

Ich bin mit .map wie unten aber immer den Fehler .default.map is not a function ich glaube, es ist weil ich die Objekte nicht arrays, ich habe versucht eine Reihe von Sachen, einschließlich object.keys aber ich bin immer Fehler alle über den Ort, in jede Richtung würde sehr geschätzt.

import values from './sample.json'

const vals = values.map((myval, index) => {
    const items = person.items.map((item, i) => {

        return (
            <div>{item.name}</div>
        )
    })

    return (
        <div>{items}</div>
    )
})
Was ist values?
Auch, was ist myval ?
Ahh sorry! Werte ist die importierte json-Datei. und myval war ein Tippfehler, es ist "person". Ich habe aktualisiert, um widerzuspiegeln, dass.
values ist kein array, also, was values.map ist eigentlich dann?
habe unten meine Antwort für Sie arbeiten?

InformationsquelleAutor Ash | 2016-08-11

  1. 8

    Ich denke, dass Ihre Daten und code einige Fehler enthält. Aber nach der Festsetzung dieser und auch die änderung des namens von 'Mensch' , 'Menschen', wenn das, was Sie nach sind, hier ist der code das tut, was Sie zu tun versuchen:

    var data = {
  content: {
      people: [
        {
          name: "Test",
          age : 24
        },
        {
          name: "Foo",
          age: 25
        }
      ]
   }
};

var App = React.createClass({
  render: function() {
    var people = data.content.people.map(function(person){
      return (<div>{person.name}</div>);
    });

    return (<div>{people}</div>)
  }
}); 

ReactDOM.render(<App/>, document.getElementById("app"));

    Und hier ist das JSBin: https://jsbin.com/coyalec/2/edit?html,js,output

    Update: ich aktualisiere die Antwort mit ausführlicheren Beispiel. Es befasst sich nun mit Daten, die mehr generisch, wie es nicht annehmen, was sind die Einträge von 'Inhalt' und so, aber er weiß, dass jeder Typ wie 'Volk' oder 'Tiere' werden in einem array. 

    var data = {
  content: {
      people: [
        {
          name: "Test",
          age : 24
        },
        {
          name: "Foo",
          age: 25
        }
      ],
      pets: [
        {
          name: "Sweety",
          age: 3
        },
        {
          name: "Kitty",
          age: 5
        }
      ]
   }
};

var App = React.createClass({
  render: function() {
    //Get the keys in data.content. This will return ['people', 'pets']
    var contentKeys = Object.keys(data.content);

    //Now start iterating through these keys and use those keys to
    //retrieve the underlying arrays and then extract the name field
    var allNames = contentKeys.map((t) => 
                       data.content[t].map((e) => (<div>{e.name}</div>))
                       );

    return (<div>{allNames}</div>)
  }
}); 

ReactDOM.render(<App/>, document.getElementById("app"));

    Und hier ist die Letzte JSBin: https://jsbin.com/coyalec/4/edit?html,js,output

    InformationsquelleAutor KumarM

Schreibe einen Kommentar