JavaScript - Data passing from googlesheet only displaying first colum and not the entire data-CodePudding

Google Sheet : https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/edit?usp=sharing

How do I display all the data that is in my google sheet?

        <tr id="tr">
          <td name="Name" id="Name"></td>
          <td name="Department" id="Department"></td>
          <td name="Title" id="Title"></td>
          <td name="Email" id="Email"></td>
          <td name="Extension" id="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";
        
        fetch(url).then(result => result.text()).then(function(csvtext){

            return csv().fromString(csvtext);

        }).then(function(csv) {
            
            csv.forEach(function(row){
                
                document.getElementById("Name").innerHTML = row.Name;
                document.getElementById("Department").innerHTML = row.Department;
                document.getElementById("Title").innerHTML = row.Title;
                document.getElementById("Email").innerHTML = row.Email;
                document.getElementById("Extension").innerHTML = row.Extension;
                
            });
        });

CodePudding user response：

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>

CodePudding user response：

As requested:

How to modify code to display all names:

Notable changes, I emptied the HTML and created a <tbody> to append dynamically generated HTML.

in the forEach loop, I create a <tr> HTMLNode and append dynamically generated <td> nodes into the newTableRow.

I then append the newTableRow with all it's new data to the tableBody.

<table id="table">

    <tbody id="tableBody">

        
    </tbody>

</table>


<script src="https://cdn.rawgit.com/Keyang/node-csvtojson/d41f44aa/browser/csvtojson.min.js"></script>
<script>

    var url = "https://docs.google.com/spreadsheets/d/1wpJvEgNDMb-VIRgsqnpzTddqLuaqTE-XTRrctRU34P4/export?format=csv";
    var tableBody = document.getElementById("tableBody");

            
    fetch(url).then(result => result.text()).then(function(csvtext){
        return csv().fromString(csvtext);
    }).then(function(csv) {
        
        csv.forEach(function(row){
            var newTableRow = document.createElement("tr")

            newTableRow.innerHTML  = `<td name="name">${row.Name}</td>`
            newTableRow.innerHTML  = `<td name="department">${row.Department}</td>`
            newTableRow.innerHTML  = `<td name="email">${row.Email}</td>`
            newTableRow.innerHTML  = `<td name="title">${row.Title}</td>`
            newTableRow.innerHTML  = `<td name="extension">${row.Extension}</td>`

            tableBody.appendChild(newTableRow)
            
        });
    });
</script>