如何根据对象数组中的键获取值javascript

Question

我有一个从数据库中获取的数组，如下所示

var sampleArray = 
{ID:1, ANALYSIS_NAME : "name1",
   custodians:"[{\"ID\": 1, \"NAME\": \"abc\"}, 
                {\"ID\": 2, \"NAME\": \"xyz\"}, 
                {\"ID\": 3, \"NAME\": \"pqr\"}]"

};

如何从上述数组中获取名称。我可以显示 console.log(sampleArray.custodians) 但是当我尝试显示 console.log(sampleArray.custodians.name) 时，我收到错误 Cannot read property 'NAME' of undefined。

return(<div>
<Panel>test</panel>
/*custodians should come here*/
</div>)

如何显示上面的对象？请帮忙。提前致谢

Answer 1

部分问题是因为 sampleArray.custodians 是 JSON 格式的字符串。您需要在访问它之前对其进行反序列化。

问题的另一部分是反序列化的结果会将custodians 转换为数组，因此您需要通过索引或循环直接访问它。

var sampleArray = {
  ID: 1,
  ANALYSIS_NAME: "name1",
  custodians: "[{\"ID\": 1, \"NAME\": \"abc\"},{\"ID\": 2, \"NAME\": \"xyz\"},{\"ID\": 3, \"NAME\": \"pqr\"}]"
};

let custodians = JSON.parse(sampleArray.custodians);

custodians.forEach(c => console.log('loop', c.NAME)); // loop

console.log('index', custodians[0].NAME); // direct access by index

-- 更新--

鉴于您的问题的更新，您可以使用map() 构建 HTML 字符串以从您的函数返回：

var sampleArray = {
  ID: 1,
  ANALYSIS_NAME: "name1",
  custodians: "[{\"ID\": 1, \"NAME\": \"abc\"},{\"ID\": 2, \"NAME\": \"xyz\"},{\"ID\": 3, \"NAME\": \"pqr\"}]"
};


let buildCustodianHtml = (data) => {
  let custodianHtml = JSON.parse(data.custodians).map(c => `<p>${c.NAME}</p>`).join('');
  return `<div><Panel>test</panel>${custodianHtml}</div>`;
}

$('#container').append(buildCustodianHtml(sampleArray));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

Answer 2

custodians 属性是一个字符串。您首先需要将此字符串转换为 JSON 使用

var custodians = JSON.parse(sampleArray.custodians);

然后您可以使用它访问它

console.log(custodians[0].NAME)

Answer 3

由于custodians是字符串，需要先转换成对象才能访问“NAME”。

使用 JavaScript 的内置 JSON.Parse()

var sampleArray = 
    {
    ID:1, ANALYSIS_NAME : "name1",
    custodians:`[{\"ID\": 1, \"NAME\": \"abc\"}, 
                {\"ID\": 2, \"NAME\": \"xyz\"}, 
                {\"ID\": 3, \"NAME\": \"pqr\"}]`

};

let newObj = JSON.parse(sampleArray.custodians);

for(let i=0; i<newObj.length; i++){
    console.log(`Name: ${newObj[i]["NAME"]}`);
}