Iterate JSON to create innerHTML links

Question

Alright I've been scouring Stack Overflow for a while now but can't seem to find the solution to my problem. I'm trying to iterate through the JSON to pull all the ids and dates in each top_worst section. The JSON looks like this:

[
{
    "timerName": "FT:Tree",
    "top_worst": [
        {
            "id": 44083,
            "date": "2015-07-14T21:31:58+00:00"
        },
        {
            "id": 44059,
            "date": "2015-07-14T20:00:58+00:00"
        },
        {
            "id": 44119,
            "date": "2015-07-14T23:30:31+00:00"
        },
        {
            "id": 44065,
            "date": "2015-07-14T20:20:46+00:00"
        },
        {
            "id": 43981,
            "date": "2015-07-14T15:20:50+00:00"
        }
    ],
    "daily_percentile_90th": 26651,
    "daily_average": 22076
},
{
    "timerName": "Search:Blog",
    "top_worst": [
        {
            "id": 44087,
            "date": "2015-07-14T21:28:48+00:00"
        },
        {
            "id": 44087,
            "date": "2015-07-14T21:22:54+00:00"
        }
    ],
    "daily_percentile_90th": 9248.1,
    "daily_average": 9040.5
},
{
    "timerName": "Search:ViewImage",
    "top_worst": [
        {
            "id": 44152,
            "date": "2015-07-15T01:04:53+00:00"
        },
        {
            "id": 44092,
            "date": "2015-07-14T21:41:27+00:00"
        },
        {
            "id": 44230,
            "date": "2015-07-15T05:22:44+00:00"
        },
        {
            "id": 44074,
            "date": "2015-07-14T20:40:57+00:00"
        },
        {
            "id": 44098,
            "date": "2015-07-14T22:03:25+00:00"
        }
    ],
    "daily_percentile_90th": 6545.6,
    "daily_average": 5571.49
}
]

So the problem is that my for-loop causes issues because not all of the timers have a top_worst section, so it throws an error when I try to use .length in the for-loop. The goal is to get a link inside the table cell using the id as part of the link, and then using the date as the visible part. See image below if you are confused (don't worry, I am too, clearly). Here is my HTML code so you can see what's going on:

function createTable(jsonData){
$.each(jsonData, function(i, item){

    var daily90th = (item.daily_percentile_90th/1000).toFixed(2);
    var dailyAverage = (item.daily_average/1000).toFixed(2);

    var $tr = $("<tr class='clickable'>").append(
        $("<td align='left'>").text(item.timerName),
        $("<td class='daily90'>").text(daily90th),
        $("<td class='dailyAvg'>").text(dailyAverage)).appendTo("#reportTable");

    var $ta = $("<tr id='spaces"+(i)+"'>").append(
        $("<td id='createLinks"+(i)+"'>")).appendTo("#reportTable");


        var where = document.getElementById('createLinks'+(i));
        where.innerHTML = "<a href='http:/example.com/example.html?id=44217'>2015-07-15T04:43:49+00:00</a>";            

});
}

Any help on this at all would be great!!! Here's a fiddle too: http://jsfiddle.net/rg2s7Lqk/1/

This is what it looks like on my site, but instead of one static link, I need to dynamically create them.

THANKS YOU GUYS!!!!

I just put the last couple lines in a for-loop like this: for(var k=0; k > jsonData.top_worst.length; k++){ var where = document.getElementById('createLinks'+i); where.innerHTML = "<a href='http://example.com/example.html?id='+jsonData[i].top_worst[k].id'>Waterfall</a>"; } @Joe but the for-loop leaves this error: Cannot read property of length undefined. It does that if I use any of the following in place: 1) jsonData[i].top_worst.id 2) jsonData.top_worst[i].id ETC. It's because some of the JSON values don't come with the top_worst. Is there a way to skip over those? — Eswizzle
– Eswizzle, Commented Jul 21, 2015 at 15:57
You are replacing the inner HTML on each iteration. Try appending to the element instead. — Joe
– Joe, Commented Jul 21, 2015 at 15:59

SD. · Accepted Answer · 2015-07-21 15:53:24Z

1

What is wrong with a normal for loop?

var where = $('#createLinks'+(i));
for (var i in item.top_worst) {
    var bad = item.top_worst[i];
    console.log(bad);
    where.append("<a href='http://example.com/example.html?id=44217'>"+bad.date+"</a><br/>");
}

Working demo.

answered Jul 21, 2015 at 15:53

SD.

9,5971 gold badge27 silver badges57 bronze badges

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

1 Comment

Eswizzle Over a year ago

The problem was I was being dumb and didn't use var i in item.top_worst instead of trying to use top_worst.length. Thank you so much @StoyanDekov !!!

Collectives™ on Stack Overflow

Iterate JSON to create innerHTML links

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related