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

Question

[Евгений]

Есть такой 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};

Answer 1

[alex]

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

Comments

[Евгений]

ошибку выдает :

(index):474 Uncaught TypeError: Cannot read property 'innerText' of null
at (index):474
at Array.map ()
at (index):474

[alex]

Евгений, нет, не выдает

Answer 2

[Ihor Bratukh]

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

Comments

[Евгений]

Ошибку выдает:

(index):512 Uncaught TypeError: Cannot read property 'textContent' of undefined
at (index):512
at NodeList.forEach ()
at (index):510

Answer 3

[Ао]

Я понимаю что те кто выше ответил крутые кодеры, и используют стрелочные функции и прочие приколюхи из за которых код становиться не читаемый, но человек не понимает как строить алгоритмы и ему нужно что то более читаемое , разве нет????

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)

Comments

[Ihor Bratukh]

let request={};
let li =
let key, val

Не учите плохому

[Ао]

Ihor Bratukh,
Ну так и поясните что плохого? и почему лучше const а не let и в каких случаях...

[Ihor Bratukh]

Ао, Вы никогда не будете менять переменную let li = document.querySelectorAll("ul > li") или let request={};, зачем тогда let? Когда другой программист читает такой код, он подумает что потому где-то будет li = false, например.

Никакой stylegide не позволяет определять пачку переменных через запятую, это плохая практика. (javascript standart [строка для поиска правила: eslint: one-var])

[Ао]

Ihor Bratukh,
про const согалсен.
про стиль ... частично.. это рекомендации и не влияют на работу программы..

[Ihor Bratukh]

Ао, табы, пробелы тоже не влияют, но вы же их ставите, чтобы было удобно читать

[alex]

Ао, т.е. по вашему стрелочные функции это приколюхи? вот давайте на чистоту, чем плох мой ответ? если автор не знает про map, reduce, spread оператор, десьруктуризацию, то пусть идёт и учит, надеюсь мой ответ ему будет только в пользу. у вас же много лишнего, и переменных ненужных насоздавали, ифы тут вообще зачем? Если вы пытались сделать подобие универсального решения, то тогда сюда ещё обработку ошибок нужно было запилить и вообще если так о рассуждать то тут целую библиотеку можно написать, не думаю что автору это нужно. да и код читать и понимать легче если его меньше.