How to add JavaScript object data to HTML

Question

I'm using PAPA parser to parse a .csv file and the file looks like this in Chrome debug tools.

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

With this I want to be able to extract the title, link, date and type and put all this into an <li> tag. How can I achieve this? I was able to parse the data and I get this and I am able to paste all the data into the HTML by using JSON.stringify(r2, null, 4);.

I want to loop through the data parent and get all the child title, dates, descriptions, type, etc.. and add these to an li tag.

Would it look something like right?

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

A simple for loop will do it. Read more about objects here: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Iansen
– Iansen, Commented Sep 11, 2015 at 20:39

Barmar · Accepted Answer · 2015-09-11 20:41:20Z

2

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

answered Sep 11, 2015 at 20:41

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

Barmar Over a year ago

Use if (type == 'sm') around the call $('ul.nflist').append().

Barmar Over a year ago

This is beginner programming if (type == 'sm') { $('ul.nflist').append(...); }

Barmar Over a year ago

The same way you do anything else depending on the value of a variable.

Barmar Over a year ago

You're removing the second one with this line: $('ul.nflist li:last-child').remove();

Barmar Over a year ago

Because data is an array, not an object.

|

Collectives™ on Stack Overflow

How to add JavaScript object data to HTML

1 Answer 1

20 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

20 Comments

Your Answer

Sign up or log in

Post as a guest

Related