javascript - 从数组中提取父 Node

Question

我有一个如下所示的数组，我希望能够提取父级然后列出子级

"options" : {
    "milk" : [ {
      "price" : 0,
      "title" : "Regular"
    }, {
      "price" : 0,
      "title" : "Soy"
    } ],
    "sugar" : [ {
      "price" : 0,
      "title" : 0
    }, {
      "price" : 0,
      "title" : 1
    } ]

这样我就可以显示 牛奶 - 常规，0 - 大 bean ，0 糖 - 0,0 - 1,0

我已经能够传递this.props.data.options.milk，它允许渲染标题/价格，但希望循环遍历选项并渲染它们是什么以及价格

谢谢

Answer 1

您可以迭代选项对象的键 如果您的选项对象如下所示:

const obj = {
  "options" : {
    "milk" : [
      {
        "price" : 0,
        "title" : "Regular"
      }, {
        "price" : 0,
        "title" : "Soy"
      }
    ],
    "sugar" : [
      {
        "price" : 0,
        "title" : 0
      }, {
        "price" : 0,
        "title" : 1
      }
    ]
  }
};

您可以像这样迭代其属性:

{
  Object.keys(obj.options).forEach((key) => {
    <Text>{key}</Text>
    <Item data={obj[key]} />
  });
}

如果数据来自this.props.data.options

{
  Object.keys(this.props.data.options).forEach((key) => {
    <Text>{key}</Text>
    <Item data={this.props.data.options[key]} />
  });
}

在 Item 组件中:

{
  this.props.data.forEach((item) => {
    <Text>
      {item.title}: {item.title}
    </Text>
  })
}