Создать массив из HTML неупорядоченного списка

Question

У меня есть неупорядоченный список, каждый элемент которого я хочу поместить в массив.

<div id='main'>
 <ul>
  <li>First</li>
  <li>Second</li>
 </ul>
</div>

Мне нужно передать его в объект JSON следующим образом:

"type": "list",
"data": ["* First", "* Second"]

На данный момент у меня есть функция, которая возвращает все данные из списка в строке:

let newObj = document.createElement("div");
newObj.innerHTML = document.getElementsByTagName('UL')[0].innerHTML;
[...newObj.querySelectorAll("li")].forEach(ele => ele.parentNode.replaceChild(document.createTextNode("* "+ele.textContent)),ele);
return newObj

Answer 1

Вы можете выбрать все li. Затем сопоставьте его, получив textContent и добавив * в качестве префикса

const items = document.querySelectorAll('#main li');
const result = {
  type: 'list',
  data: Array.from(items).map(el => `* ${el.textContent}`),
}
console.log(result)

<div id="main">
  <ul>
    <li>First</li>
    <li>Second</li>
  </ul>
</div>

Answer 2

Вы можете использовать jquery:

let $li = $('#main').find('li') //returns a collection
let array = $.map($li, e => '* ' + e.textContent)

Преобразование в JSON:

let toJson = JSON.stringify(array)