@prukon
Начинающий разработчик

Как сформировать объект из DOM в js?

Есть такой DOM:
<ul>
            <li class="white"><span class="one">Арсенал</span> <span class="two">100</span></li>
            <li class="blue"><span class="one">Мечта</span> <span class="two">200</span></li>
            <li class="red"><span class="one">Сибирь</span> <span class="two">300</span></li>
        </ul>

Надо сформировать такой объект:

result = {Арсенал:100, Мечта:200, Сибирь:300};
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
potapchino
@potapchino
const result = [...document.querySelectorAll('ul > li')]
  .map(el => [el.querySelector('.one').innerText, el.querySelector('.two').innerText])
  .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});

console.log(result) // { "Арсенал": "100", "Мечта": "200", "Сибирь": "300" }
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
BRAGA96
@BRAGA96
<ul>
    <li class="white"><span class="one">Арсенал</span> <span class="two">100</span></li>
    <li class="blue"><span class="one">Мечта</span> <span class="two">200</span></li>
    <li class="red"><span class="one">Сибирь</span> <span class="two">300</span></li>
</ul>

<script>
    const result = {};

    document.querySelectorAll("ul > li").forEach($item => {
        const [$one, $two] = $item.querySelectorAll("span.one, span.two");
        result[$one.textContent] = parseInt($two.textContent, 10);
    });

    console.log(result);
</script>
Ответ написан
@darknefrit
Я понимаю что те кто выше ответил крутые кодеры, и используют стрелочные функции и прочие приколюхи из за которых код становиться не читаемый, но человек не понимает как строить алгоритмы и ему нужно что то более читаемое , разве нет????
let li =   document.querySelectorAll("ul > li");
let request={};
for (let item of li ){
  console.log(item);
  let key, val
  for(let span of item.children){
    
   if(span.classList.contains("one")){
     key = span.innerHTML
   }
    if(span.classList.contains("two")){
     val = span.innerHTML
   }
  }
  request[key]=val;
}
console.log(request)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы