Разбор JSON в JavaScript с помощью цикла for - PullRequest
0 голосов
/ 19 апреля 2011

A] Краткое описание проблемы:

У меня есть данные JSON, которые возвращаются из python в javascript. Я хочу пройти через структуру JSON и распечатать элементы данных в HTML-таблице.

B] Кодовые выдержки:

1] JSON возвращается из Python -

{'data_for_users_city': 
 '[
    {"city": 
            {"city_name": "Boston", 
             "country": {"country_name": "United States"}
            },
            "status": true, 
            "date_time": {"ctime": "Thu Apr  7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}
    },
  ]'
}

Обратите внимание, что это один город, например, в данных JSON много элементов города.

2] Javascript-код, который я пытался проанализировать через структуру данных и распечатать элементы данных в «tbody» готовой HTML-таблицы «#datatable_for_current_users»

function LoadUsersDatatable(data) {
   var tbody = $("#datatable_for_current_users > tbody").html("");

   for (var i=0; i < data.length; i++) 
    {
      var city = data.data_for_users_city[i];
        var rowText = "<tr class='gradeA'><td>" + city.county.country_name + "</td><td>" + city.city_name + "</td><td>" + city.status + "</td><td>" + city.date_time.ctime + "</td></tr>";

          $(rowText).appendTo(tbody);
 }
}    

Проблемы с кодом Javascript:

1] Я не могу найти точную длину элементов города в «данных», из-за чего я не знаю, какова верхняя граница цикла for

2] Я не уверен, правильно ли я получаю доступ к переменной city в цикле for.

[РЕДАКТИРОВАТЬ # 1]

Основываясь на ответе Салмана и Пойнти, я должен был проверить код python, который возвращал данные json. После некоторой отладки было обнаружено, что данные JSON возвращаются с использованием шаблонов, из-за чего имя шаблона встречается в данных JSON. Я изменил механизм отправки JSON, и теперь вот как выглядят возвращенные данные JSON

[{"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 1, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 2, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:03 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 3, "microsecond": 359000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 3, 3, 97, -1], "year": 2011, "epoch": 1302169083.0, "isoformat": "2011-04-07T09:38:03.359000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 3, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:08 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 8, "microsecond": 281000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 8, 3, 97, -1], "year": 2011, "epoch": 1302169088.0, "isoformat": "2011-04-07T09:38:08.281000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 4, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:14 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 14, "microsecond": 578000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 14, 3, 97, -1], "year": 2011, "epoch": 1302169094.0, "isoformat": "2011-04-07T09:38:14.578000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 13, "status": true, "date_time": {"ctime": "Wed Apr 13 01:37:58 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 58, "microsecond": 343000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 37, 58, 2, 103, -1], "year": 2011, "epoch": 1302658678.0, "isoformat": "2011-04-13T01:37:58.343000", "day": 13, "minute": 37}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 14, "status": false, "date_time": {"ctime": "Wed Apr 13 01:38:01 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 1, "microsecond": 78000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 38, 1, 2, 103, -1], "year": 2011, "epoch": 1302658681.0, "isoformat": "2011-04-13T01:38:01.078000", "day": 13, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 23, "status": true, "date_time": {"ctime": "Sun Apr 17 21:24:18 2011", "hour": 21, "isoweekday": 7, "month": 4, "second": 18, "microsecond": 625000, "isocalendar": [2011, 15, 7], "timetuple": [2011, 4, 17, 21, 24, 18, 6, 107, -1], "year": 2011, "epoch": 1303075458.0, "isoformat": "2011-04-17T21:24:18.625000", "day": 17, "minute": 24}}]

Я все еще изо всех сил пытаюсь получить цикл for вокруг этой структуры json.

[РЕДАКТИРОВАТЬ # 2]

После некоторой отладки и ответа от @Salman, следующая функция выполняет работу

function LoadUsersDatatable(data) {
                                   var tbody = $("#datatable_for_current_users > tbody").html(""); 
                                   jsonData = jQuery.parseJSON(data);

                                   for (var i = 0; i < jsonData.length; i++) 
                                    {
                                        var citydata = jsonData[i];
                                        var rowText = "<tr class='gradeA'><td>" + citydata.city.country.country_name + "</td><td>" + citydata.city.city_name + "</td><td>" + citydata.status + "</td><td>" + citydata.date_time.ctime + "</td></tr>";
                                        $(rowText).appendTo(tbody);
                                    }

                                }    

Одна проблема, которую я обнаружил во время отладки, заключалась в том, что возвращаемый JSON был в строковом формате и должен был быть преобразован в объект JSON, это было сделано с помощью jQuery.

Ответы [ 4 ]

2 голосов
/ 19 апреля 2011

Вы, похоже, используете jQuery.Если вы хотите сгенерировать прямой HTML из данных JSON, одним из простых решений является использование простых шаблонов через плагин, таких как jQote2 .Он предоставляет простой синтаксис, который просматривает ваши данные.Использование шаблонов JS также упрощает поддержку структуры HTML.

1 голос
/ 19 апреля 2011

Странно, похоже, что data_for_users_city - это не массив, а строка.Я надеюсь, что это не опечатка или ошибка копирования / вставки.

Редактировать 1

Даже если вы воспринимаете это как строку, ваш JSON все еще содержит ошибки.Новые строки внутри кавычек не допускаются в JavaScript, вы должны заменить их на \n, использовать оператор конкатенации + или \, чтобы разбить строку на несколько строк.Если вам удастся обойти эти проблемы, вы можете сделать следующее:

var data_for_users_city = eval(data.data_for_users_city);
// sometimes adding extra parenthesis help
// var data_for_users_city = eval('(' + data.data_for_users_city + ')');
alert(data_for_users_city.length);

EDIT 2

Это быстрое и грязное демо, которое я создал и протестировал в консоли FireFox / Firebug.Это в основном демонстрирует, как вы можете получить доступ к трем уровням данных внутри JSON.Для правильной визуализации данных JSON скопируйте следующий код и вставьте jsbeautifier .

var data = [{"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 1, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:00 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 0, "microsecond": 796000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 0, 3, 97, -1], "year": 2011, "epoch": 1302169080.0, "isoformat": "2011-04-07T09:38:00.796000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 2, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:03 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 3, "microsecond": 359000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 3, 3, 97, -1], "year": 2011, "epoch": 1302169083.0, "isoformat": "2011-04-07T09:38:03.359000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 3, "status": true, "date_time": {"ctime": "Thu Apr  7 09:38:08 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 8, "microsecond": 281000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 8, 3, 97, -1], "year": 2011, "epoch": 1302169088.0, "isoformat": "2011-04-07T09:38:08.281000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 4, "status": false, "date_time": {"ctime": "Thu Apr  7 09:38:14 2011", "hour": 9, "isoweekday": 4, "month": 4, "second": 14, "microsecond": 578000, "isocalendar": [2011, 14, 4], "timetuple": [2011, 4, 7, 9, 38, 14, 3, 97, -1], "year": 2011, "epoch": 1302169094.0, "isoformat": "2011-04-07T09:38:14.578000", "day": 7, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 13, "status": true, "date_time": {"ctime": "Wed Apr 13 01:37:58 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 58, "microsecond": 343000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 37, 58, 2, 103, -1], "year": 2011, "epoch": 1302658678.0, "isoformat": "2011-04-13T01:37:58.343000", "day": 13, "minute": 37}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 14, "status": false, "date_time": {"ctime": "Wed Apr 13 01:38:01 2011", "hour": 1, "isoweekday": 3, "month": 4, "second": 1, "microsecond": 78000, "isocalendar": [2011, 15, 3], "timetuple": [2011, 4, 13, 1, 38, 1, 2, 103, -1], "year": 2011, "epoch": 1302658681.0, "isoformat": "2011-04-13T01:38:01.078000", "day": 13, "minute": 38}}, {"city": {"city_name": "Framingham", "country": {"country_name": "United States", "id": null}, "id": null}, "id": 23, "status": true, "date_time": {"ctime": "Sun Apr 17 21:24:18 2011", "hour": 21, "isoweekday": 7, "month": 4, "second": 18, "microsecond": 625000, "isocalendar": [2011, 15, 7], "timetuple": [2011, 4, 17, 21, 24, 18, 6, 107, -1], "year": 2011, "epoch": 1303075458.0, "isoformat": "2011-04-17T21:24:18.625000", "day": 17, "minute": 24}}];
var table = $("<table border='1'/>");
var thead = $("<thead/>")
    .appendTo(table);
$("<tr/>")
    .append("<th>Country</th>")
    .append("<th>City</th>")
    .append("<th>Status</th>")
    .append("<th>Time</th>")
    .appendTo(thead);
var tbody = $("<tbody/>")
    .appendTo(table);
for (var i = 0; i < data.length; i++) {
    var citydata = data[i];
    $("<tr/>")
        .append("<td>" + citydata.city.country.country_name + "</td>")
        .append("<td>" + citydata.city.city_name + "</td>")
        .append("<td>" + citydata.status + "</td>")
        .append("<td>" + citydata.date_time.ctime + "</td>")
        .appendTo(tbody);
}
//
// FOR TESTING
//
$("body").append(table);
0 голосов
/ 19 апреля 2011

Если вы используете jQuery, рассмотрите возможность использования var json = $.parseJSON(data).Это преобразует вашу строку JSON в объект JSON.

Попробуйте.Это должно облегчить доступ к вашим объектам.

0 голосов
/ 19 апреля 2011

Рассматривали ли вы использовать шаблонизатор Javascript для преобразования JSON в HTML?

Я автор pure.js , который довольно оригинален, но существует множество классических двойных-скобки-двигатели в наличии.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...