【问题标题】:How to add JavaScript object data to HTML如何将 JavaScript 对象数据添加到 HTML
【发布时间】:2015-09-11 20:27:36
【问题描述】:

我正在使用 PAPA 解析器来解析一个 .csv 文件,该文件在 Chrome 调试工具中看起来像这样。

       [Object]
data: Array[4]
    0: Array[5]
    0: "title"
    1: "summary_text"
    2: "date"
    3: "type"
    4: "link"
    length: 5
    __proto__: Array[0]
    1: Array[5]
    0: "Choice, Happiness and Spaghetti Sauce"
    1: "Delivering product variety: chunky spaghetti sauce, zesty pickles, or weak coffee? Gladwell explains how the root of happy customers is product variety."
    2: "30-Jan-13"
    3: "sm"
    4: "https://www.facebook.com/permalink.php?id=380939405308665&story_fbid=298838986905013"
    length: 5
    __proto__: Array[0]
    2: Array[5]
    3: Array[1]
    length: 4
    __proto__: Array[0]
    errors: Array[0]
    meta: Object
    __proto__: Object
    length: 1
    __proto__: jQuery[0]

有了这个,我希望能够提取标题、链接、日期和类型,并将所有这些放入 <li> 标记中。我怎样才能做到这一点?我能够解析数据并得到它,并且可以使用JSON.stringify(r2, null, 4); 将所有数据粘贴到 HTML 中。

我想遍历数据父级并获取所有子级标题、日期、描述、类型等。并将这些添加到 li 标签。

它看起来像对吗?

Papa.parse("http://support.jonar.com/support/default.asp?pg=pgDownload&pgType=pgWikiAttachment&ixAttachment=142896&sFileName=newsroom.csv", {
    download: true,
    complete: function(results) {
            //console.log("REMOTE FILE PARSED!", results.data);
                var r2 = $(results);
                //var r3 = JSON.stringify(r2, null, 4);
                //console.log(r2)
                $('ul.nflist').append( $('<li />', {text: results}));
    }
});

【问题讨论】:

标签: javascript jquery html json csv


【解决方案1】:
function(results) {
    $.each(results.data.slice(1), // skip first row of CSV headings
        function(i, data) {
            var title = data[0];
            var link = data[4];
            var date = data[2];
            var type = data[3];
            $('ul.nflist').append($('<li>', {
                html: '<a href="' + link + '">' + title + '</a> ' + date + ' ' + type
            });
    });
}

【讨论】:

  • 在呼叫 $('ul.nflist').append() 周围使用 if (type == 'sm')
  • 这是初学者编程if (type == 'sm') { $('ul.nflist').append(...); }
  • 根据变量的值做其他事情的方式与此相同。
  • 您正在使用此行删除第二个:$('ul.nflist li:last-child').remove();
  • 因为data 是一个数组,而不是一个对象。
猜你喜欢
  • 2013-01-03
  • 2023-03-08
  • 2010-12-17
  • 2021-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-11-13
相关资源
最近更新 更多