Функция Map () возвращает только последнее значение?

Question

Это данные, которые я хочу получить:

    "buttons":[
           {
              "name":"Screen1",
              "display":"Screen1",
              "command":"Screen1"
           },
           {
              "name":"Screen2",
              "display":"Screen2",
              "command":"Screen2"
           },
           {
              "name":"Screen3",
              "display":"Screen3",
              "command":"Screen3"
           }
        ]
     },

Мой код для получения кнопок данных:

let btnConmand = '';
  let btnName = '';
  let btntest = data.map(ele => {
    if(ele.id == '0100') {
      ele.component[0].buttons.map(btns => {
        btnName = btns.name;
      });
    }
    return btnName ;

  }).join('');
 console.log(btntest)

Когда я пишу console.log(btntest), он возвращает только последнее значение? Как мне получить все значения?

Answer 1

Я думаю, вы хотите что-то подобное.
1) При использовании map всегда возвращайте обновленное значение в функцию карты

let btntest = data
  .flatMap(ele => {
    let btns = [];
    if (ele.id == "0100") {
      btns = ele.component[0].buttons.map(btns => btns.name);
    }
    return btns;
  })
  .join("");
console.log(btntest);

Answer 2

Вам необходимо использовать массив

btntest

в качестве массива. то, что вы сейчас делаете, вернет последнее значение с btntest dataType.