Search code examples
javascripthtmlcsvpapaparse

CSV data to html using id with papa.parse and js

I'm new to this just a bit, especially with js and using papa parse. My goal is to create an HTML chart using a CSS grid rather than HTML table tags. But I'm getting the div's printing "undefined", but in my actual google sheet, there are values.


    <script type="text/javascript" src="papaparse.min.js"></script> 
    <script>
        var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/my=csv';
        
        function init() {
            Papa.parse(public_spreadsheet_url, {
                download: true,
                header: false,
                complete: function(results) {
                    results.data.map(function(data, index) { //I've tried 'forEach' but no lu
                        header1.innerHTML = data.header1;
                        header2.innerHTML = data.header2;
                        header3.innerHTML = data.header3;
                        tableModel1.innerHTML = data.tableModel1;
                        tableModel1.innerHTML = data.tableModel1;
                        tableModel1.innerHTML = data.tableModel1;
                        tableModel1.innerHTML = data.tableModel1;
                        tableModel1.innerHTML = data.tableModel1;
                        tableModel1.innerHTML = data.tableModel1;
                    });
                }
            })
        };
        
        window.addEventListener('DOMContentLoaded', init)
</script>

This returns the following array in the console:

data: Array(2)
0: (42) ["header1", "header2", "header3", "header4", "header5", "header6", "tableModel1", "tableModel2", "tableModel3", "tableModel4", "tableModel5", "tableModel6", "tableModel7", "tableModel8", "tableModel9", "tableInventory1", "tableInventory2", "tableInventory3", "tableInventory4", "tableInventory5", "tableInventory6", "tableInventory7", "tableInventory8", "tableInventory9", "tableCore1", "tableCore2", "tableCore3", "tableCore4", "tableCore5", "tableCore6", "tableCore7", "tableCore8", "tableCore9", "tableLeadx1", "tableLeadx2", "tableLeadx3", "tableLeadx4", "tableLeadx5", "tableLeadx6", "tableLeadx7", "tableLeadx8", "tableLeadx9"]
1: (42) ["Table Title", "Make", "Model", "Inventory", "Core", "Lead Time", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009", "1010", "0", "1", "2", "1", "0", "1", "0", "3", "100", "40", "2", "4", "1", "1", "0", "1", "15", "Ready", "Hold", "Hold", "Ready", "Hold", "Hold", "Ready", "Ready", "Ready"]
length: 2

Here's my HTML I'm trying to map things too using their id's.

<section>
    <div class="tWrapper">
        <div class="grid-container">
            <div class="gridOne">
                <div class="tableTitle gridHeader" id="header1"></div>
                <div class="MakeModel gridSubheader" id="header2"></div>
                <div class="LeadTime gridSubheader" id="header3"></div>
                <div class="gridMakeModel" id="tableModel1"></div>
                <div class="gridTimeValue" id="tableLeadx1"></div>
                <div class="gridMakeModel" id="tableModel2"></div>
                <div class="gridTimeValue" id="tableLeadx2"></div>
                <div class="gridMakeModel" id="tableModel3"></div>
                <div class="gridTimeValue" id="tableLeadx3"></div>
                <div class="gridMakeModel" id="tableModel4"></div>
                <div class="gridTimeValue" id="tableLeadx4"></div>
                <div class="gridMakeModel" id="tableModel5"></div>
                <div class="gridTimeValue" id="tableLeadx5"></div>
                <div class="gridMakeModel" id="tableModel6"></div>
                <div class="gridTimeValue" id="tableLeadx6"></div>
                <div class="gridMakeModel" id="tableModel7"></div>
                <div class="gridTimeValue" id="tableLeadx7"></div>
                <div class="gridMakeModel" id="tableModel8"></div>
                <div class="gridTimeValue" id="tableLeadx8"></div>
                <div class="gridMakeModel" id="tableModel9"></div>
                <div class="gridTimeValue" id="tableLeadx9"></div>
            </div>
        </div>
    </div>
</section>

I'm thinking I'm overlooking something with the complete function. Here's a screenshot showing my results. HTML css grid chart

Solution

  • I assume first row is list IDs and second row is the value. Loop first row results.data[0] then if element exist set it with second row results.data[1][index]

    var public_spreadsheet_url =
  'https://docs.google.com/spreadsheets/d/e/......';

function init() {
  Papa.parse(public_spreadsheet_url, {
    download: true,
    header: false,
    complete: function (results) {
      results.data[0].map(function (id, index) {
        var element = document.querySelector('#' + id);
        if (element) { // exist
          element.innerHTML = results.data[1][index];
        }
      });
    },
  });
}

window.addEventListener('DOMContentLoaded', init);