通过反应获取 json 对象数据

Posted 2023-02-22

【中文标题】通过反应获取 json 对象数据

【英文标题】：Getting json object data with react

【发布时间】：2016-12-17 14:07:56

【问题描述】：

我正在尝试像这样从 json 中提取数据，将其作为“值”导入

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

【问题讨论】：

另外，myval 是什么？

啊抱歉！值是导入的 json 文件。 myval 是一个错字，它是“人”。我已经更新以反映这一点。

values 不是数组，那么values.map 应该是什么意思呢？

@Ash 我在下面的回答对你有用吗？

@KumarM 是的，谢谢，抱歉延迟查看，非常完美，您的扩展示例也很有帮助！

【参考方案1】：

我认为您的数据和代码有一些错误。但是在修复这些并将名称从“人”更改为“人”之后，如果这就是你所追求的，那么这里的代码就是你想要做的事情：

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

更新：我正在用更详细的示例更新答案。它现在更通用地处理数据，就像它不假设“内容”等的条目是什么，但它知道像“人”或“宠物”这样的每种类型都是一个数组。

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