How to loop over li in ul using javascript

Question

I want to loop over each li> in ul> and later add them into an array. How should I go about creating a for loop to return each li and put them into array. Getting the li in a loop is where I got stuck.

var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false })

nightmare
  .goto('https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux')

  .wait(500)
  .evaluate(function () {
    var ht = document.querySelector('#toc > ul > li.toclevel-1.tocsection-5 > ul 
    ').innerText;
    return ht;
  })
  .end()
  .then(function (result) {
    console.log(result)
  })
  .catch(function (error) {
    console.error('Search failed:', error);
  });

Output:

PS C:\scrapping> node .\2.js
5.1     RHEL 2.1
5.2     RHEL 3
5.3     RHEL 4
5.4     RHEL 5
5.5     RHEL 6
5.6     RHEL 7

PS C:\scrapping>

score 0 · Answer 1 · answered Jun 02 '17 at 17:11

0

You can get an array of all the <li>s by adjusting your original function to use the children property instead of the innerText property.

For example:

function () {
  var ht = document.querySelector('#toc > ul > li.toclevel-1.tocsection-5 > ul
  ').children;
  return ht;
}

This will return an array of all of the <ul>'s children elements.

answered Jun 02 '17 at 17:11

Christopher Bradshaw

2,615
4
24
38

Thanks for replying. If I do that I get this: ``$ node stackOverflow.js { '0': {}, '1': {}, '2': {}, '3': {}, '4': {}, '5': {} }`` like empty array. – JSjohn Jun 03 '17 at 10:44
This wont work due to reasons mentioned in my answer – devilpreet Jun 27 '17 at 07:23
@devilpreet Thank you!! exactly what I wanted. – JSjohn Jul 07 '17 at 20:26

score 0 · Accepted Answer · answered Jun 23 '17 at 09:42

The problem is that when you expect the result in then(), underneath nightmare.ipc is called and it tries to stringify/destringify to send it to your application. HTMLElements(returned by document.querySelectorAll()) will probably fail to stringify and such errors can be seen in developer console of browserWindow

You can easily do this:

const Nightmare = require('nightmare');
const nightmare = Nightmare({
  show: true,
  openDevTools: true,
});

nightmare
  .goto('https://en.wikipedia.org/wiki/Red_Hat_Enterprise_Linux')
  .evaluate(function(selector) {
    var links = document.querySelectorAll(selector);
    var passed = [];
    for(var ii=0; ii<links.length; ii++) {
      passed.push(links[ii].textContent);
    }
    return passed;
  }, '#toc > ul > li.toclevel-1.tocsection-5 > ul > li')
  .then(function(result) {
    console.log(result); // Outputs length.
  })
  .catch(function(error) {
    console.error('Failed', error);
  });

  //Output
  [ '5.1 RHEL 2.1',
  '5.2 RHEL 3',
  '5.3 RHEL 4',
  '5.4 RHEL 5',
  '5.5 RHEL 6',
  '5.6 RHEL 7' ]

How to loop over li in ul using javascript

2 Answers2