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

Question

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.

Can you try printing your `results` object to the console to make sure it contains the data in the same format you expect? — samuei, Mar 19 '21 at 01:24
`results.data` is list of array not object so you can't use `data.header1`, instead use `data[0]` to select first column and it better to post your example csv url — uingtea, Mar 19 '21 at 02:15
I've attempted to use `data[0]` but doing that throws an error for _Unexpected token '['_ . Here's the link [link](https://docs.google.com/spreadsheets/d/e/2PACX-1vRJLJ-nvY2cEMCON9bA8P1386rIs9yhWieMifQxMrwZNmjEniHJoKz8QwxlB1pEYqsFqtgUkx6pW4Af/pub?gid=0&single=true&output=csv) @uingtea — mjl, Mar 19 '21 at 13:15
@samuei here is the console results(on data 0 there are more but in a comment it won't allow me to show all of them): data: Array(2) 0: (42) ["header1", "header2", "header3", "header4", "header5", "header6", "tableModel1", "tableModel2", "tableModel3",..."] 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 — mjl, Mar 19 '21 at 13:20

score 2 · Accepted Answer · answered Mar 19 '21 at 14:17

2

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);

answered Mar 19 '21 at 14:17

uingtea

6,002
2
26
40

I've tested this, however, I believe I might have not correctly implemented it. Should I set `var element` per value? `complete: function (results) { results.data[0].map(function (id, index) { var element = document.querySelector('#' + id); if (element) { // exist header1.innerHTML = results.data[1][header1]; header2.innerHTML = results.data[1][header2]; header3.innerHTML = results.data[1][header3]; tableModel1.innerHTML = results.data[1][tableModel1]; tableModel1.innerHTML = results.data[1][tableModel1]; tableModel1.innerHTML = results.data[1][tableModel1];` – mjl Mar 19 '21 at 14:48
for the header1 element, it returns in the HTML just "undefined". Here's what I get in the console: `CPO-InventoryLeadTimesChart.html:21 Uncaught ReferenceError: header2 is not defined > at CPO-InventoryLeadTimesChart.html:21 > at Array.map () > at Object.complete (CPO-InventoryLeadTimesChart.html:15) > at l.parseChunk (papaparse.min.js:7) > at l._chunkLoaded (papaparse.min.js:7) > at XMLHttpRequest. (papaparse.min.js:7)` – mjl Mar 19 '21 at 15:30
you want to display the table as 2 column? also check this [demo](https://plnkr.co/edit/zpC6zsfiOBMIU1gI?open=lib%2Fscript.js&preview) – uingtea Mar 19 '21 at 16:09
Actually, I have three sheets in totally and yes, each sheet will have its own HTML chart with two columns of values. I'm working on that now [link](https://codepen.io/handpainted/pen/ZEBdGjK) thank you. – mjl Mar 19 '21 at 18:11
thank you for your help, it's working well. – mjl Mar 19 '21 at 20:22

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

1 Answers1