Cheerio无法正确解析HTML

Question

I've got an array of rows that I've parsed out of a table from html, stored in a list. Each of the rows in the list is a string that looks (something) like this:

["<td headers="DOCUMENT" class="t14data"><a target="6690-Exhibit-C-20190611-1" href="http://www.fara.gov/docs/6690-Exhibit-C-20190611-1.pdf" class="doj-analytics-processed"><span style="color:blue">Click Here </span></a></td><td headers="REGISTRATIONNUMBER" class="t14data">6690</td><td headers="REGISTRANTNAME" class="t14data">SKDKnickerbocker LLC</td><td headers="DOCUMENTTYPE" class="t14data">Exhibit C</td><td headers="STAMPED/RECEIVEDDATE" class="t14data">06/11/2019</td>","<td headers="DOCUMENT" class="t14data"><a target="5334-Supplemental-Statement-20190611-30" href="http://www.fara.gov/docs/5334-Supplemental-Statement-20190611-30.pdf" class="doj-analytics-processed"><span style="color:blue">Click Here </span></a></td><td headers="REGISTRATIONNUMBER" class="t14data">5334</td><td headers="REGISTRANTNAME" class="t14data">Commonwealth of Dominica Maritime Registry, Inc.</td><td headers="DOCUMENTTYPE" class="t14data">Supplemental Statement</td><td headers="STAMPED/RECEIVEDDATE" class="t14data">06/11/2019</td>"]

The code is pulled from the page with the following page.evaluate function using puppeteer.

I'd like to then parse this code with cheerio, which I find to be simpler and more understandable. However, when I pass each of the strings of html into cheerio, it fails to parse them correctly. Here's the current function I'm using:

    let data = res.map((tr) => {
        let $ = cheerio.load(tr);
        const link = $("a").attr("href");
        const number = $("td[headers='REGISTRATIONNUMBER']").text();
        const name = $("td[headers='REGISTRANTNAME']").text();
        const type = $("td[headers='DOCUMENTTYPE']").text();
        const date = $("td[headers='STAMPED/RECEIVEDDATE']").text();
        return { link, number, name, type, date };
    });

For some reason, only the "a" tag is working correctly for each row. Meaning, the "link" variable is correctly defined, but none of the other ones are. When I use $("*") to return a list of what should be all of the td's, it returns an unusual node list:

What am I doing wrong, and how can I gain access to the td's with the various headers, and their text content? Thanks!

Answer 1

It usually looks more like this:

let data = res.map((i, tr) => {
  const link   = $(tr).find("a").attr("href");
  const number = $(tr).find("td[headers='REGISTRATIONNUMBER']").text();
  const name   = $(tr).find("td[headers='REGISTRANTNAME']").text();
  const type   = $(tr).find("td[headers='DOCUMENTTYPE']").text();
  const date   = $(tr).find("td[headers='STAMPED/RECEIVEDDATE']").text();
  return { link, number, name, type, date };
}).get();

Keep in mind that cheerio map has the arguments reversed from js map.

Answer 2

I found the solution. I'm simply returning the full html through puppeteer instead of trying to get individual rows, and then using the above suggestion (from @pguardiario) to parse the text:

 const res = await page.evaluate(() => {
            return document.body.innerHTML;
        });

 let $ = cheerio.load(res);
        let trs = $(".t14Standard tbody tr.highlight-row");

 let data = trs.map((i, tr) => {
        const link = $(tr).find("a").attr("href");
        const number = $(tr).find("td[headers='REGISTRATIONNUMBER']").text();
        const registrant = $(tr).find("td[headers='REGISTRANTNAME']").text();
        const type = $(tr).find("td[headers='DOCUMENTTYPE']").text();
        const date = moment($(tr).find("td[headers='STAMPED/RECEIVEDDATE']").text()).valueOf().toString();
        return { link, number, registrant, type, date };
    });