使用带有 papa.parse 和 js 的 id 到 html 的 CSV 数据

Question

我对此有点陌生，尤其是在 js 和使用 papa parse 方面。我的目标是使用 CSS 网格而不是 HTML table 标签创建 HTML 图表。但是我得到 div 的打印“未定义”，但在我的实际 google sheet 中，有值。


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

这个returns控制台中的以下数组：

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

这是我的 HTML 我也在尝试使用他们的 ID 映射事物。

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

我想我忽略了一些功能完整的东西。这是显示我的结果的屏幕截图。

Answer 1

我假设第一行是列表 ID，第二行是值。循环第一行 results.data[0] 然后如果元素存在将其设置为第二行 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);

使用带有 papa.parse 和 js 的 id 到 html 的 CSV 数据

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

html

javascript

csv

papaparse