Okay, so here's a little bonus section where we're going to do where we make the code a little more
dynamic in case you don't want to actually type out which column belongs to what property.
So we simply get the property or the table header names from the table, and then we assign that to
the corresponding property names.
So regardless what kind of table we are throwing at the code, it's going to find out.
Okay, the first table header is this name.
In this case it's company.
So it's going to assign the object property to be company name.
So even if we are stuck with a table, we come to a table that has a table header that says name instead
of company here, we're going to automatically get an object out that has a property that's called name
and the corresponding table data cell value.
So let's try and see how we can do that instead.
So I'm going to make a new file here and I'm going to call it dynamic table scraping.
JS And then I'm going to copy and paste the code we have from the other file inside and let's try and
see how we can do this now.
So on the first row we need to get the table header names from this one and assign them into a array
so we can use them for the property names later on.
So let's also make a new array here.
Let's call it table headers.
And then down here where we are at the first row with the table headers, we're going to do something
a little more than just return true and skip the row.
So we're going to go and say take all the table header elements.
So we say element dot, find FX.
So that's all the table header elements we get here.
And then we're going to go through each of these table headers and get their text content or their name
basically.
So, um, so t h.
S dot each.
And then we have the index and the element, and then we have the arrow function here.
And then let's say we do a so then we say table headers dot push and we simply push the this elements
inside that loop we say.
Basically the table header element.
We take the text content of that one and push it onto the table headers array.
Okay.
And just for good measure, let's also make it lowercase because property names in JavaScript are usually
camel case or.
I just lowercase.
I think they're just lowercase, actually.
Okay.
So two lowercase.
Just to make sure we are following JavaScript object property naming convention.
And so now we have our table headers inside the table headers array.
Now we need to use them when we are assigning properties inside the loop.
So we don't have a loop yet for all the cells, so we need to make that.
So TDs dot each.
And again, we have the index element.
And so what we're going to do is we're going to use the index from the TDs because they are corresponding
to the table headers and use that to assign a a object property.
So first, before we have the loop, let's make a table row object up here, just an empty object and
then we can say table row, and then we use the variable name or variable object property, which is
the table headers array that we're using for this.
And we use the, the, the index from this loop to access the table headers variable name.
And then we use that to, to declare inside of our table row object.
It sounds complicated, but maybe it's easier when you actually see it in action.
So we make sure that the value of this object property corresponds to element dot text.
Okay, so then we go through each of the TDs and create a object property based on the table, headers
based on the index, which also corresponds to the ones in here.
I mean, index zero of the TDs is the same as index zero of the table headers.
Anyway, then we end up with that.
And let's try to see.
And now we can remove this because that was the hard coded way.
Now we have a dynamic way of doing things, and then we can just say push table row instead.
And now let's try and run this code and see if the output is exactly the same as before.
So we can say.
We can say.
Node dynamic table scraping and indeed we can see it fits exactly what we had before.
Except for that we have an empty object here at the first table row, and that's because we actually
didn't skip this first table row.
We just did this case where we do the table headers array.
We also need to say return true so that we don't go through the rest of the code.
So now if I say clear here and try to run it again, we can see that we get the data exactly as before,
but without the empty object at the top.
So now we can pretty much push this code and other tables that might have like 20 table headers or 20
columns and we don't have to type out.
Type it out.
Hard coded inside of the code every time.
So if you have a big table with lots of columns, then you can use this approach.
Um, if the code is not as verbose or as readable, I would say as before, maybe where it's very concise
saying that index zero is equal to company index one is equal to contact and so on.
But this is a little more dynamic and you can throw more stuff at it, so to say.
Anyway, I hope you enjoyed this and all of the code is available on GitHub also for you to see.
So if you have any questions, let me know.
So see you in the next section.