如何通过 function 中的名称查找数组元素的索引？

Question

我有一个 js function 读取 JSON 文件并通过循环输出它们：

response.data.forEach((item,index)=>{

  items += " <div class='eleman'>"
        + "<img src='"+item.teamMember.profileImageUrl+"' width='100%'>"
        + "<div class='content list'>"
        + "<div class='fullname'>"+item.teamMember.fullName+"</div>"+

    ...

json 上有一个名为 customFields (item.teamMember.customFields) 的数组，它可能有 0 到 7 个索引，其中一个索引的示例应该是：

id    : 1202
name  : Tags
type  : SingleLineText
value : Composer,Music,Pan's Labyrinth

我想获取名为 ByLine 的索引的值。 并在全名div下使用。

我尝试了几个代码，但它们都不起作用。 如果有人可以提供帮助，将不胜感激。

Answer 1

以下是从问题中假设的：

1. response.data是一个数组
2. 这个数组中的每个元素都是一个 object
3. 每个这样的 object 都有一个名为teamMember的道具
4. 每个teamMember都有一个名为customFields的道具，它是一个数组
5. Array 的每个元素（在上面的第 4 点）都有一个道具name

目标是仅从customFields数组中过滤元素name prop 与值ByLine匹配的那些元素。

实现这一目标的一种可能方法：

const getIndexOfByLine = (arr = item.teamMember.customFields, matchNameWith = 'ByLine') => (
  arr
    .map((el, i) => ({elt: el, idx: i}))
    .filter(obj => obj.name === matchNameWith)
    .map(obj => obj.idx)
    [0]
);

注意：如果超过 1 个元素的name为“ByLine”，则仅返回第一个索引。

解释

• 使用map遍历item.teamMember.customFields数组，其中元素为el ，索引为i 。
• 对于数组中的每个元素，返回一个 object 和两个 props，即elt和idx

.map((el, i) => ({elt: el, idx: i}))

• 在结果数组中，应用过滤器并仅保留name与ByLine匹配的那些元素（可以通过参数matchNameWith更改）

.filter(obj => obj.name === matchNameWith)

• 现在，我们有一个包含两个道具elt和idx的对象的数组。 由于我们只需要索引， map数组只获取索引。

.map(obj => obj.idx)

• 如果有多个元素以 'ByLine' 作为name ，只需使用第一次出现。

[0]

Answer 2

我用了这个，它奏效了

let byline=item.teamMember.customFields.filter(checkbyline);


function checkbyline(fields) {
  if (fields.name == 'Byline') {
  return fields.value}
else {return }
}   

并在 HTML output 上使用它

byline[0].value