javascript - 我的 JavaScript for 循环有问题

Question

我试图遍历返回的 JSON 数组并在表中显示值。我的数组包含多个具有多个值的对象，因此每个对象将 = 一个新行，每个值将 = 一个新单元格。

这是我试过的一个版本:

function refreshUrlArray(urlsRetrieved) {
    $('#response').html('Attempting to update your URLs, please wait...');

    var urlsObj = urlsRetrieved;
    console.log("JSON results returned from DB query: " + urlsObj);

    //Create object holding table
    $table = "<table id='urlTable'><td>Name</td><td>Release Time</td><td>Release Date</td><td>Category</td><td>Genre</td><td>URL</td>";

    //debugging (loop count)
    var c = 0;

    for (var key in urlsObj) {
        if (urlsObj.hasOwnProperty(key)) {

            var val = urlsObj[key];

            $table += "<tr>";

            $table + "<td>" + val.name; + "</td>";
            $table + "<td>" + val.releaseTime; + "</td>";
            $table + "<td>" + val.releaseDate; + "</td>";
            $table + "<td>" + val.category; + "</td>";
            $table + "<td>" + val.genre; + "</td>";
            $table + "<td>" + val.url; + "</td>";

            $table += "</tr>";

            //debugging (loop count)
            c++;
            console.log("Count: " + c);
        }
    }

    $('#response').html('Attempting to display your URLs, please wait...');
    $('#content01').append($table);

};

我还尝试了以下方法:

function refreshUrlArray(urlsRetrieved) {
    $('#response').html('Attempting to update your URLs, please wait...');

    var urlsObj = urlsRetrieved;
    console.log("JSON results returned from DB query: " + urlsObj);

    //Create object holding table
    $table = "<table id='urlTable'><td>Name</td><td>Release Time</td><td>Release Date</td><td>Category</td><td>Genre</td><td>URL</td>";

    //debugging (loop count)
    var c = 0;

    for (var i = 0; i < urlsObj.length; i++) {

        $table += "<tr>";

        $table + "<td>" + urlsObj[i].name; + "</td>";
        $table + "<td>" + urlsObj[i].releaseTime; + "</td>";
        $table + "<td>" + urlsObj[i].releaseDate; + "</td>";
        $table + "<td>" + urlsObj[i].category; + "</td>";
        $table + "<td>" + urlsObj[i].genre; + "</td>";
        $table + "<td>" + urlsObj[i].url; + "</td>";

        $table += "</tr>";

        //debugging (loop count)
        c++;
        console.log("Count: " + c);
    }

    $('#response').html('Attempting to display your URLs, please wait...');
    $('#content01').append($table);

};

两个版本都返回相同的结果。我得到了表格标题，并且在我的表格中得到了一堆空行。我在循环中添加的调试计数在它停止之前达到 405。据我猜测，我认为循环会为我的 JSON 结果的每个字符循环一次

关于我做错了什么有什么想法吗？谢谢。

JSON 响应(已通过 IS 格式正确的 JSON 测试):

[{"userId":4,"name":"Doctor Who","releaseTime":"2015-11-22 12:45:24","releaseDate":"Monday","category":"Television","genre":"Action","url":"http:\/\/www.netflix.com\/browse?jbv=70142441&jbp=0&jbr=1"},{"userId":4,"name":"Game Of Thrones","releaseTime":"2015-11-22 13:34:06","releaseDate":"Tuesday","category":"Television","genre":"Drama","url":"http:\/\/www.tvmuse.com\/tv-shows\/Game-of-Thrones_25243\/"}]

Answer 1

您的问题与 JSON 解析有关。

首先执行此操作:这会将您的 JSON 字符串对象转换为 Javascript 对象，您可以在其中循环。

var items = JSON.parse('[{"userId":4,"name":"Doctor Who","releaseTime":"2015-11-22 12:45:24","releaseDate":"Monday","category":"Television","genre":"Action","url":"http:\/\/www.netflix.com\/browse?jbv=70142441&jbp=0&jbr=1"},{"userId":4,"name":"Game Of Thrones","releaseTime":"2015-11-22 13:34:06","releaseDate":"Tuesday","category":"Television","genre":"Drama","url":"http:\/\/www.tvmuse.com\/tv-shows\/Game-of-Thrones_25243\/"}]');

然后，这样做

for(i=0; i<items.length; i++){
    console.log(items[i].url);
    console.log(items[i].name); //etc
}