Как избавиться от лишнего уровня вложенности в объекте

Question

Согласно моей задачи, мне необходимо из такой вёрстки:

    <a href="1.html">111</a>
    <a href="2.html">222</a>
    <a href="3.html">333</a>

получить следущий массив объектов:

[
    {
        text: '111',
        href: '1.html',
    },
    {
        text: '222',
        href: '2.html',
    },
    {
        text: '333',
        href: '3.html',
    },
]

У меня получился следующий код:

 let arr = [...document.querySelectorAll("a")];// создаю массив из а
    let res = []// создаю массив в который буду пушить результат
  for (const el of arr) { //перербираю все элементы массива
    const obj = Object.fromEntries( // создаю обЪект, в котором буду перебирать массив
      arr.map((text, href) => [ //перебираю массив
        ,  
        {
          text: el.text, // формирую объект
          href: el.href,
        },
      ])
    );
   res.push(obj) //пушу объект в массив
  }

console.log('res', res)//  результате я получаю объект с двумя уровнями вложенности, которые мне не нужны.

 <a href="1.html">111</a>
<a href="2.html">222</a>
<a href="3.html">333</a>

Я понимаю, что ошибся, но для меня работа с entrise и fromEntries в новинку, поэтому прошу помощи)

Answer 1

У вас получилось немного лишнего кода.

Можно через map

const elements = Array.from(document.querySelectorAll("a"))

const result = elements.map(({ text, href }) => ({
  text,
  href,
}))

console.log('result:', result)

<a href="1.html">111</a>
<a href="2.html">222</a>
<a href="3.html">333</a>

Можно через forEach

const elements = Array.from(document.querySelectorAll("a"))
const result = []

elements.forEach(({ text, href }) => {
  result.push({
    text,
    href,
  })
})

console.log('result:', result)

<a href="1.html">111</a>
<a href="2.html">222</a>
<a href="3.html">333</a>

Answer 2

До меня дошло, что пушить нужно сразу при переборе. Вот мой результат:

 
   let arr = [...document.querySelectorAll("a")];
  let res = [];
  const obj = arr.map((el) => [
    res.push({
      text: el.text,
      href: el.href,
    }),
  ]);
  console.log("res", res);

<a href="1.html">111</a>
<a href="2.html">222</a>
<a href="3.html">333</a>

Буквально эффект присутствия)

БЛОГ НА HUSL

Как избавиться от лишнего уровня вложенности в объекте

Ответы (2 шт):