使用 React 获取 json 对象数据

Question

我正在尝试像这样从 json 中提取数据，导入为 "values"

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

我正在使用 .map 如下所示，但出现错误 .default.map is not a function 我相信这是因为我有对象而不是数组，我尝试了很多东西，包括 object.keys 但是我到处都是错误，任何方向都将不胜感激。

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

Answer 1

我认为你的数据和代码有一些错误。但是在修复这些问题并将名称从 'person' 更改为 'people' 之后，如果这就是您想要的，那么这里是执行您正在尝试执行的操作的代码：

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

这里是 JSBin：https://jsbin.com/coyalec/2/edit?html,js,output

更新： 我正在用更详细的示例更新答案。它现在更通用地处理数据，就像它不假设 'contents' 等的条目是什么，但它知道每个类型，如 'people' 或 'pets' 是一个数组。

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

这是最新的 JSBin：https://jsbin.com/coyalec/4/edit?html,js,output

使用 React 获取 json 对象数据

Getting json object data with react

json

jsx

reactjs