How do I convert data from html table into array of object using vanilla javascript

Question

It's well known, that 'array of objects' format of data storage is well suitable for data persisting. I'd be extremely grateful if a JavaScript guru helps me with finding the answer to how do I read this HTML-table with vanilla JavaScript and transport data from it into the following array of objects.

I have produced tons of code, mostly comparing two arrays of objects. Unfortunately, I didn't come even closer to a solution.

The table to scrape data from:

<table>
  <tbody>
    <tr>
      <td colspan="3">Canada</td>
    </tr>
    <tr>
      <td>Toronto</td>
      <td>Montreal</td>
      <td>Vancouver</td>
    </tr>
    <tr>
      <td colspan="3">USA</td>
    </tr>
    <tr>
       <td>New York</td>
       <td>Chicago</td>
       <td>Boston</td>
    </tr>
    <tr>
       <td>Washington</td>
       <td>Detroit</td>
       <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Expected outcome to be like so:

 [
 {"country":"Canada","city":"Toronto"},
 {"country":"Canada","city":"Montreal"},
 {"country":"Canada","city":"Vancouver"},
 {"country":"USA","city":"New York"},
 {"country":"USA","city":"Chicago"},
 {"country":"USA","city":"Boston"},
 {"country":"USA","city":"Washington"},
 {"country":"USA","city":"Detroit"},
 {"country":"USA","city":"Los Angeles"}
 ]

The code is valid, unlike the approach:

let theResult = [];
    arrayOfCountriesAndCitiesObjects.forEach((item, iIndex) => {
        arrayOfCitiesObjects.forEach((elem, eIndex) => {
            if(item.city !== elem.city && item.iIndex < elem.eIndex) theResult.push(copy(elem, item)); 
        });
    });
    function copy(firstObj) {
      for (let i = 1; i < arguments.length; i++) {
        let arg = arguments[i];
        for (let key in arg) {
          firstObj[key] = arg[key];
        }
      }
      return firstObj;
    }

is it possible to change the markup for you? i.e. adding css classes to that table rows? — messerbill
– messerbill, Commented May 6, 2019 at 12:53
Absolutely, actually, I have simplified the table, the true one is full of css' classes around both countries and cities. — Maksym Dudyk
– Maksym Dudyk, Commented May 6, 2019 at 13:08
does @Nina Scholz's answer fit your needs? Otherwise i can provide one using some class-selector logic — messerbill
– messerbill, Commented May 6, 2019 at 13:13
@MaksymDudyk : If you happen to deal with much larger data and performance considerations do matter, you might want to check out my answer below as it gives you certain advantage in that regard, while for loop solution can be much faster on a small input table, though. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented May 7, 2019 at 4:24

Nina Scholz · Accepted Answer · 2019-05-06 13:01:09Z

3

You could store the value of colSpan === 3 as country and push all other values as city to the result set.

This works with plain Javascript without any libraries.

var result = [],
    country = '';

document
    .querySelectorAll('table td')
    .forEach(td => {
        if (td.colSpan === 3) {
            country = td.innerHTML;
            return;
        }
        result.push({ country, city: td.innerHTML.trim() });
    });

console.log(result);

<table>
  <tbody>
    <tr>
      <td colspan="3">Canada</td>
    </tr>
    <tr>
      <td>Toronto</td>
      <td>Montreal</td>
      <td>Vancouver</td>
    </tr>
    <tr>
      <td colspan="3">USA</td>
    </tr>
    <tr>
       <td>New York</td>
       <td>Chicago</td>
       <td>Boston</td>
    </tr>
    <tr>
       <td>Washington</td>
       <td>Detroit</td>
       <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

answered May 6, 2019 at 13:01

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

3 Comments

Maksym Dudyk Over a year ago

Looks clean and elegant, Nina! I will try out your solution in real life. Thank you very much, so far.

Maksym Dudyk Over a year ago

Nina, let's suppose, I need to address each last 'td' to make an extra key/value pair record in object. Taking Eddie's code, I'd just add var lastCell = td[2].innerHTML inside the second loop. How would I do that in your code?

Nina Scholz Over a year ago

then you need a row and iterate the row. it would be easier, if you add the problem to the question, or better ask a new question, because this question is already answered as it is.

Eddie · Accepted Answer · 2019-05-06 13:51:51Z

2

You can use for to loop thru each tr. Find the td on each tr, If there is only 1, store the text on currentCountry variable. If more than one, push the object to the result variable.

var currentCountry = "";
var result = [];

var tr = document.querySelectorAll('table tr');

for (var i = 0; i < tr.length; i++) {
  var td = tr[i].querySelectorAll('td');

  if (td.length === 1) currentCountry = td[0].innerHTML;
  else if (td.length > 1) {
    for (var a = 0; a < td.length; a++) {
      result.push({country: currentCountry,city: td[a].innerHTML});
    }
  }
}

console.log(result);

<table>
  <tbody>
    <tr>
      <td colspan="3">Canada</td>
    </tr>
    <tr>
      <td>Toronto</td>
      <td>Montreal</td>
      <td>Vancouver</td>
    </tr>
    <tr>
      <td colspan="3">USA</td>
    </tr>
    <tr>
      <td>New York</td>
      <td>Chicago</td>
      <td>Boston</td>
    </tr>
    <tr>
      <td>Washington</td>
      <td>Detroit</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

edited May 6, 2019 at 13:51

answered May 6, 2019 at 12:56

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

4 Comments

messerbill Over a year ago

and what happens if there appears an entry with a country where only a single city is given? according to your logic this city would be identified as a country

Eddie Over a year ago

OMG. I missed that there is no jQuery. I convert the jQuery code to vanilla. I guess we let OP decide if that scenario is possible.

Maksym Dudyk Over a year ago

I am trying to scrape data from the page overloaded with tags and css. Your solution seems to be very easy to readjust to my case. Thank you, Eddie.

Eddie Over a year ago

Happy to hear about that :)

Marcelo Vismari · Accepted Answer · 2019-05-06 13:03:13Z

1

var country = null, result = [];
var tds = Array.from(document.querySelectorAll("#myTable tbody tr td"));
for (var i = 0; i < tds.length; i++) {
	let item = tds[i];
	if (item.getAttribute("colspan") == "3") {
		country = item.innerText;
		continue;
	}
	
	result.push({ country: country, city: item.innerText });
}
console.log(result);

<table id="myTable">
	<tbody>
		<tr>
			<td colspan="3">Canada</td>
		</tr>
		<tr>
			<td>Toronto</td>
			<td>Montreal</td>
			<td>Vancouver</td>
		</tr>
		<tr>
			<td colspan="3">USA</td>
		</tr>
		<tr>
			<td>New York</td>
			<td>Chicago</td>
			<td>Boston</td>
		</tr>
		<tr>
			<td>Washington</td>
			<td>Detroit</td>
			<td>Los Angeles</td>
		</tr>
	</tbody>
</table>

answered May 6, 2019 at 13:03

Marcelo Vismari

1,1798 silver badges16 bronze badges

1 Comment

Maksym Dudyk Over a year ago

Thank you, Marcelo, I'll try out your solution.

Jjagwe Dennis · Accepted Answer · 2019-05-06 13:27:34Z

1

Using reduce

 const items = document.querySelectorAll('table tbody td')

 const results = [...items].reduce((allItems, item)=>{
   if(item.getAttribute('colspan') === '3'){
     allItems['country'] = item.textContent
     return allItems
   }
   allItems.push({country: allItems['country'],city:item.textContent})
   return allItems
 },[])

answered May 6, 2019 at 13:27

Jjagwe Dennis

1,87312 silver badges13 bronze badges

2 Comments

Maksym Dudyk Over a year ago

Dennis, your script isn't working correctly, spitting out extra "country:USA"; The problem, I guess, is here: allItems['country'] = item.textContent

Jjagwe Dennis Over a year ago

Oh yeah!!! I was lazy to create the country variable outside the reduce loop but @U25lYWt5IEJhc3RhcmQg answer below does that. I chose this because all loops skip named indices in the array and they are not included in the length computation of the array

Maheer Ali · Accepted Answer · 2019-05-07 05:00:08Z

1

You need to assign all <tr> which contain country names a special class. Then use querySelectorAll and use forEach loop.

const tr = document.querySelectorAll('tr');

const arr = []
let count = '';

tr.forEach(x => {
  if(x.classList.contains('head')){
    count = x.children[0].innerHTML
  }
  else{
    let child = [...x.querySelectorAll('td')]
    arr.push(...child.map(a => ({country:count,city:a.innerHTML})))
  }
})

console.log(arr)

<table>
  <tbody>
    <tr class="head">
      <td  colspan="3">Canada</td>
    </tr>
    <tr>
      <td>Toronto</td>
      <td>Montreal</td>
      <td>Vancouver</td>
    </tr>
    <tr class="head" >
      <td colspan="3">USA</td>
    </tr>
    <tr>
       <td>New York</td>
       <td>Chicago</td>
       <td>Boston</td>
    </tr>
    <tr>
       <td>Washington</td>
       <td>Detroit</td>
       <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

edited May 7, 2019 at 5:00

answered May 6, 2019 at 13:02

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

2 Comments

Maheer Ali Over a year ago

@MaksymDudyk Fixed. This was because I was pushing result of map() with out ...

Maksym Dudyk Over a year ago

Maheer, your code has resulted in five container arrays, instead of one. But the idea with using classList.contains as a check-mark is cool!

Yevhen Horbunkov · Accepted Answer · 2019-05-27 09:42:15Z

1

Not that elegant, but to me slightly more comprehensive (while being the fastest for larger input data samples) reduce() solution:

const result = [...document.getElementsByTagName('td')].reduce((res, item) => (item.getAttribute('colspan') == 3 ? res.country = item.textContent : res.obj = [...(res.obj || []), {country: res.country, city: item.textContent}], res), {}).obj;

console.log(result);

<table>
  <tbody>
    <tr>
      <td colspan="3">Canada</td>
    </tr>
    <tr>
      <td>Toronto</td>
      <td>Montreal</td>
      <td>Vancouver</td>
    </tr>
    <tr>
      <td colspan="3">USA</td>
    </tr>
    <tr>
       <td>New York</td>
       <td>Chicago</td>
       <td>Boston</td>
    </tr>
    <tr>
       <td>Washington</td>
       <td>Detroit</td>
       <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

edited May 27, 2019 at 9:42

answered May 6, 2019 at 14:35

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

1 Comment

Maksym Dudyk Over a year ago

Super! Thank you!

Collectives™ on Stack Overflow

How do I convert data from html table into array of object using vanilla javascript

6 Answers 6

3 Comments

4 Comments

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

4 Comments

1 Comment

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related