Google Sheet : https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/edit?usp=sharing
Trying to pass data from google sheet into the table I created. I am not sure if there is something wrong with my code or im not doing this by order.
<tr id="tr">
<td name="Name" id="name"></td>
<td name="Department"></td>
<td name="Title"></td>
<td name="Email"></td>
<td name="Extension"></td>
</tr>
<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
var tableRow = document.querySelector("tr");
fetch(url).then(result => result.text()).then(function(csvtext){
return csv().fromString(csvtext);
}).then(function(csv) {
//main.innerHTML = JSON.stringify(csv);
csv.forEach(function(row){
tableRow.document.getElementById("name").innerHTML = row.name;
});
});
>Solution :
Hey looks like you have a couple of errors:
First error,
tags should be nested inside a table tag.
like so:
<table>
<tr id="tr">
<td name="Name" id="name"></td>
<td name="Department"></td>
<td name="Title"></td>
<td name="Email"></td>
<td name="Extension"></td>
</tr>
</table>
also in your forEach function, to access a different HTMLNode in the document just do it like this:
fetch(url).then(result => result.text()).then(function(csvtext){
return csv().fromString(csvtext);
}).then(function(csv) {
//main.innerHTML = JSON.stringify(csv);
csv.forEach(function(row){
document.getElementById("name").innerHTML = row.Name // just use document
});
});
and your final mistake is capitalization. it’s row.Name NOT row.name
This is a copy and paste of my final solution to get it working:
<table>
<tr id="tr">
<td name="Name" id="name"></td>
<td name="Department"></td>
<td name="Title"></td>
<td name="Email"></td>
<td name="Extension"></td>
</tr>
</table>
<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
<script src="./index.js">
var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
var tableRow = document.querySelector("tr");
console.log(tableRow)
fetch(url).then(result => result.text()).then(function(csvtext){
return csv().fromString(csvtext);
}).then(function(csv) {
//main.innerHTML = JSON.stringify(csv);
csv.forEach(function(row){
document.getElementById("name").innerHTML = row.Name
});
});
</script>