Create array from HTML unordered list

Question

I have an unordered list, each element of which I want to put in an array.

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

I need to transfer it to JSON object like this:

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

For now, i have function which return all data from list in string:

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

Mark Partola · Accepted Answer · 2020-05-06 18:52:43Z

8

You can select all of the li. Then map it getting textContent and adding * as prefix

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>

edited May 6, 2020 at 18:52

answered May 6, 2020 at 18:44

Mark Partola

6643 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

csandreas1 · Accepted Answer · 2020-05-06 19:34:04Z

-1

You can use jquery:

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

Converting to JSON:

let toJson = JSON.stringify(array)

edited May 6, 2020 at 19:34

answered May 6, 2020 at 19:16

csandreas1

2,4202 gold badges37 silver badges58 bronze badges

1 Comment

PA. Over a year ago

OP does not mention jquery, and jquery does not bring any additional value over mark's answer

Collectives™ on Stack Overflow

Create array from HTML unordered list

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related