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

Question

I have a js function that reads a JSON file and outputs them with a loop:

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>"+

    ...

There is an array on that json called customFields (item.teamMember.customFields) and it could have 0 to 7 indexes, example for one of them should be like:

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

I want to get the value of the index that's name is ByLine. And use it under the full name div.

I tried several codes but they didn't work. Would appreciate if anyone can help.

Answer 1

Below are assumed from the question:

1. response.data is an Array
2. Each element in this Array is an object
3. Each such object has a prop named teamMember
4. Each teamMember has a prop named customFields which is an Array
5. Each element of the Array (at point 4 above) has a prop name

The objective is to filter only those elments from customFields array where the element's name prop matches the value ByLine .

One possible way to achieve this:

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]
);

NOTE: If more than 1 element has name as 'ByLine' then only the first index is returned.

Explanation

• Iterate through the item.teamMember.customFields array using map with element as el and index as i .
• For each element in the array, return an object with two props namely elt and idx

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

• In the resulting array, apply the filter and keep only those elements where name matches ByLine (can be changed via parameter matchNameWith )

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

• Now, we have an array with objects that have the two props elt and idx . Since we only require the index, map the array to get only the index.

.map(obj => obj.idx)

• In case there were more than 1 elements that had 'ByLine' as the name , simply use the first occurance.

[0]

Answer 2

I used this and it worked

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


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

and to use it on the HTML output

byline[0].value