在dict内循环遍历json数组

Loop over json array inside dict

本文关键字：json 数组 遍历 循环 dict      更新时间：2023-09-26

我真的不擅长javascript，但你必须学习。我试图循环通过json字符串建立一个表。它(算是)起作用了。但有一块不行。我尝试循环遍历一个布尔值数组。如果为真，则添加一列文本为"yes"，如果为假，则添加一列文本为"no"。但这部分行不通。它根本不会增加任何值!

我的代码的其他建议是高度赞赏:

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

简单HTML模板:

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

提示(或者给自己的注释，如果你愿意的话)

  1. 我真的从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. 数组在javascript中是不可变的(如果我使用了错误的术语，请编辑)。

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

您已经添加了额外的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>');
    });

给你。each()方法需要一个索引和值。值是你的布尔值。

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

测试和工作

您需要更改=== on ==，因为这是布尔对象，并且this === true始终

试试这个代码:

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

我建议不要在$中使用this。每一个都不完全是你所期望的。

http://jsfiddle.net/EzTL7/

相反，使用第二个参数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>');
});

应该使用$.each来迭代数组

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

和你使用concat的错误方式。concat不会改变被调用者的值，相反，你应该使用返回值:

row = row.concat(['<td>yes</td>']);
相关文章：