CODEWITHSUNDEEP
javascriptjqueryjson
Niclas Nilsson
Niclas Nilsson

Reputation: 5901

Loop over json array inside dict

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)

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

  2. 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']);

Upvotes: 1

Views: 94

Answers (5)

lars-august
lars-august

Reputation: 388

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

Upvotes: 1

Jia
Jia

Reputation: 395

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.

Upvotes: 1

Anoop
Anoop

Reputation: 23208

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

Upvotes: 2

Kevin B
Kevin B

Reputation: 95062

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

Upvotes: 1

Mihail
Mihail

Reputation: 1479

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

Upvotes: 1

Related Questions