Loop over json array inside dict

Question

I really suck at javascript, but you have to learn. I'm trying to loop thru a json string to build a table. It's working (kind of). But one piece is not working. I try to loop thru an array of booleans. If it's true, add a column with the text "yes", if it's false add one with "no". But that part won't work. It won't add any values at all!

Additional suggestions of my code is highly appreciated:

var jsonstr = '{"no_of_places": 4, "teams": {"Player 1": {"done": [true, true, true, false], "time": null},    "Player 2": {"done": [true, true, true, true], "time": "0 dagar 1:10:21"}, "Player 3": {"done": [true, true, true, true], "time": "0 dagar 2:47:34"}}}';

$(document).ready(function () {
    var result = jQuery.parseJSON(jsonstr);
    var theadTr = $('.scorestable thead tr');

    theadTr.append('<th>Team</th>');
    // Adds one header for each place
    for (var i = 0; i < result.no_of_places; i++) {
        theadTr.append('<th>' + (i + 1) + '</th>');
    }

    // Add teams and their result.
    $.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td><td>'];
        // Add if place is found or not.
        $(this.done).each(function () {
            if (this === true) {
                row.concat(['<td>yes</td>']);
            } else {
                row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');
    });
});

Simple HTML template:

<p></p>
<table class="scorestable">
    <thead>
        <tr></tr>
    </thead>
    <tbody></tbody>
</table>

Hints (or note to self, if you want)

I really learned alot from this simple snippet from Kevin B:

$.each(["foo","bar","foobar"],function(i,val){
   console.log(typeof this,typeof i,typeof val); 
 });

 // OUTPUTS:
 // ========
 // object number string
 // object number string
 // object number string

Arrays are immutable (edit if I use wrong term) in javascript.

// So instead of:
origArray.concat(['more', 'values']);

// I need to write:
origArray = origArray.concat(['more', 'values']);

Anoop · Accepted Answer · 2013-04-11 20:22:29Z

2

You have added extra td JSFIDDLE

$.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td>']; // extra td
        // Add if place is found or not.
        $(this.done).each(function () {
            if (this === true) {
                row = row.concat(['<td>yes</td>']);
            } else {
                row = row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');
    });

edited Apr 11, 2013 at 20:22

answered Apr 11, 2013 at 20:09

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

3 Comments

Niclas Nilsson Over a year ago

Oh. Stupid of me. That was one problem, but I can't get it to work anyway: jsfiddle.net/cx3VA/8

Anoop Over a year ago

@NiclasNilsson I made required changes in jsfiddle check link

Niclas Nilsson Over a year ago

Oh, It did'nt quite work. But your code made me see my misstake. I thought row where a mutable object and I didn't need to put row = row.concat... I could figure it out myself from your fiddle but it was'nt quite what I was asking for. So an upvote! I wish I could give you two :-p Lars-August nailed what I already figured out though.

lars-august · Accepted Answer · 2013-04-11 20:26:43Z

1

Here you go. The each() method needs an index and value. The value is your boolean.

 // Add teams and their result.
$.each(result.teams, function (index, value) {
        var row = ['<tr><td>', index, '</td>']; // extra td
        // Add if place is found or not.
        $(this.done).each(function (index, value) {
            if (value === true) {
                row = row.concat(['<td>yes</td>']);
            } else {
                row = row.concat(['<td>no</td>']);
            }
        });

        $('.scorestable tbody').append(row.join('') + '</tr>');

    });

Tested and working

edited Apr 11, 2013 at 20:26

answered Apr 11, 2013 at 20:21

lars-august

3882 silver badges9 bronze badges

Comments

Mihail · Accepted Answer · 2013-04-11 20:16:54Z

1

You need change === on ==, because this is boolean object and this === true always.

Try this code:

if (this == true) {
  row.concat(['<td>yes</td>']);
} else {
   row.concat(['<td>no</td>']);
}

answered Apr 11, 2013 at 20:16

Mihail

1,47911 silver badges14 bronze badges

1 Comment

user400654 Over a year ago

this in that case should be a boolean, he's looping over an array of booleans.

user400654 · Accepted Answer · 2013-04-11 20:16:57Z

1

I'd suggest not using this inside of $.each, it isn't exactly what you would expect.

http://jsfiddle.net/EzTL7/

Instead, use the second parameter that you named value

 $.each(result.teams, function (index, value) {
    var row = ['<tr><td>', index, '</td>'];
    // Add if place is found or not.
    $(value.done).each(function () {
        if (this === true) { // `this` is ok here because you're using $.fn.each and not $.each
            row.concat(['<td>yes</td>']);
        } else {
            row.concat(['<td>no</td>']);
        }
    });

    $('.scorestable tbody').append(row.join('') + '</tr>');
});

answered Apr 11, 2013 at 20:16

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Comments

Jia · Accepted Answer · 2013-04-11 20:24:22Z

1

You should use $.each for iterating the array.

   $.each(this.done, function (i, v) {
        if (v === true) {
            row = row.concat(['<td>yes</td>']);
        } else {
            row = row.concat(['<td>no</td>']);
        }
        console.log(row);
    });

And you use concat in the wrong way. concat won't change callee's value, instead you should use the return value:

row = row.concat(['<td>yes</td>']);

A working example for your code.

answered Apr 11, 2013 at 20:24

Jia

3953 silver badges10 bronze badges

Collectives™ on Stack Overflow

Loop over json array inside dict

Hints (or note to self, if you want)

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Hints (or note to self, if you want)

5 Answers 5

3 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related