如何访问数组中对象的名称属性

Question

经过一番研究，我发现通过映射访问此数组的方法类似于

const locations = [
    {
      country: "United States",
      city: "Henderson",
      state: "Kentucky",
      postalCode: 42420,
    
    },
    {
     
      country: "United States",
      city: "Henderson",
      state: "Kentucky",
      postalCode: 42420,
     
    }]

locations.map((item)=>{<p>{item.city}</p>})

假设对于上述情况，我想获得诸如 country 、city 之类的名称，我该如何提取这些对象 titles 。 我浏览了一些文档和资源，但我没有找到明确的解决方案

Answer 1

在地图中，您应该通过删除大括号来返回对象

locations.map(item => <p>{item.city}</p> )

或者如果您保留大括号，请添加明确的return

locations.map(item => { return <p>{item.city}</p> })

如果您想为页面上显示的内容添加更多内容，您可以在地图的返回中添加更多字段

locations.map(item => <p>{item.country}, {item.city}, {item.state}, {item.postalCode}</p> )

Answer 2

我想你的意思是你想使用属性名称作为标签？如果是这样，您需要将每个项目的 Object.keys() 或 Object.entries() 迭代为嵌套的 map() 调用。您需要一个包含组件来保存它，这里是一个外部 <div> 元素。

const locations = [
  {
    country: 'United States',
    city: 'Henderson',
    state: 'Kentucky',
    postalCode: 42420,
  },
];

locations.map((item) => {
  <div key={item.unique_property}>
    {Object.entries(item).map((label, value) => (
      <p><span>{label}: </span>{value}</p> 
    ))}
  </div>;
});

这将输出如下内容

<div>
  <p><span>country: </span>United States</p>
  <p><span>city: </span>Henderson</p>
  <p><span>state: </span>Kentucky</p>
  <p><span>postalCode: </span>42420</p>
</div>

Answer 3

虽然下面应该工作没有测试。

{locations.map((val) =>
    Object.keys(val?.fields).map((field) => (
      <p key={field}>
        Key : {field}
        Value:{val?.fields[field]}
      </p>
    ))
  )}