Javascript 从嵌套Json访问数据

我有一个对象，稍后将被JSON响应结构替换，如下所示，我将作为道具传递该对象，在子组件中，我希望通过“值”映射以呈现数据

App.js

“data”: {
         “title”: {
           “text”: “”
         },
         “subtitle”: {
           “text”: “”
         },
         “renderable”: [
           {
             “title”: {
               “text”: “”
             },
             “sub_title”: {
               “text”: “”
             },
             “values”: [
               {
                 “id”: “1”,
                 “title”: {
                   “text”: “”
                 },
                 “subtitle”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 99"
                 },
                 “preselected”: “true”
               },
               {
                 “id”: “2",
                 “title”: {
                   “text”: “”
                 },
                 “sub_title”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 199”
                 },
                 “preselected”: “false”
               },
             ]
           }
         ]
       }

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Demo options={data} />
      </React.Fragment>
    )
  }
}

“数据”：{
“标题”：{
“文本”：”
},
“副标题”：{
“文本”：”
},
“可渲染”：[
{
“标题”：{
“文本”：”
},
“子标题”：{
“文本”：”
},
“价值观”：[
{
“id”：“1”，
“标题”：{
“文本”：”
},
“副标题”：{
“文本”：”
},
“价格标签”：{
“文本”：“Rs 99”
},
“预选”：“正确”
},
{
“id”：“2”，
“标题”：{
“文本”：”
},
“子标题”：{
“文本”：”
},
“价格标签”：{
“文本”：“Rs 199”
},
“预选”：“假”
},
]
}
]
}
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}

我不确定如何访问和映射子组件中可渲染（目前可渲染中有一个对象，但稍后将填充）内部的“值”。

您的数据结构是

数据（对象）->可渲染（对象数组）->值（数组）

那么你会先做吗

data.renderable...

然后，您可以映射数组并点击每个对象，其中包含数组中的值

data.renderable.map((obj) => obj.values)

然后，您可以映射

obj.values

，但使用

.flatMap（）

将所有项目放入一个一级数组更有意义

data.renderable.flatMap((obj) => obj.values.map((item) => item.id))

---

示例演示可以显示如下数据

class Demo extends React.Component {

render(){
    const { data } = this.props;
    return (
        <div>
            <h1>{data.title}</h1>
            <h2>{data.subtitle</h1>
            <ul>
                {data.renderable.map(row => (
                    <h1>{row.title}</h1>
                    <h2>{row.subtitle</h1>
                        {row.values.map(item => (
                            <li key={item.id}>
                                {item.title}
                                {item.subtitle}
                                {item.price_tag}
                            </li>
                        ))}
                ))}
            </ul>
        </div>
        )
    }
}

export default Demo;

类演示扩展了React.Component{
render（）{
const{data}=this.props；
返回(
{data.title}
{data.subtitle

{data.renderable.map（行=>(
{row.title}
{row.subtitle
{row.values.map（项=>(

{item.title}
{item.subtitle}
{item.price_tag}

))}
))}

)
}
}
导出默认演示；