Блог

Главная - Вопросы по программированию - jquery — JSON в

jquery — JSON в

#jquery

#jquery

Вопрос:

У меня есть Json в виде

 [{"id":39,"data":1},{"id":40,"data":2}]

Он неправильно анализирует с jQuery.parseJSON()

Мне нужно взять эти данные и создать html table . Я думал о динамическом создании HTML в js.

A. Как я могу проанализировать json?
B. Является ли динамический html лучшим маршрутом?

Обновить
Я прошу прощения. Очевидно, мой вопрос не ясен. Вот jquery

  $.get('Service.aspx',
    { p1: value, p2: value },
    function (data) {
        notesJson = data;
        alert(notesJson);//Json comes back as I said here...
        var noteSet = jQuery.parseJSON(notesJson);
        alert(noteSet.notes);                      
 });

примечания действительно существуют в Json.
Второе предупреждение завершается ошибкой «не определено».

Комментарии:

1. откуда берется JSON?

2. @Neal $.get запрос, отправленный в ASP.NET страница, использующая JavaScriptSerializer msdn.microsoft.com/en-us/library /…

3. $.parseJSON(‘[{«id»: 39, «data»: 1},{«id»: 40, «data»: 2}]’); работал в консоли FF для меня. Почему у вас это работает некорректно? Ошибки, нулевые объекты? Какой браузер выдает вам проблемы.

4. Вы ищете noteSet[0].примечания? на основе описания вашего формата данных noteSet будет представлять собой массив объектов.

5. @П.Брайан. Макки, я отредактировал свой ответ на основе вашего обновления

Ответ №1:

Ок, основываясь на вашем комментарии к вашему вопросу:

Используйте $.getJSON вместо $.get :

 $.getJSON('someurl', {/*somedata*/}, function(json_data){

    //no need for parsejson
    //use the json_data object

    var table_obj = $('table');
    $.each(json_data, function(index, item){
         var table_row = $('<tr>', {id: item.id});
         var table_cell = $('<td>', {html: item.data});
         table_row.append(table_cell);
         table_obj.append(table_row);
    })

})

Комментарии:

1. Вместо использования строковых литералов, как в ответе Нила, существует довольно много библиотек шаблонов javascript, которые вы можете использовать. В Microjs приведено довольно много списков, а также есть шаблоны jQuery .

2. Я использовал ваш оригинальный ответ. $.getJSON был точным и простым.

3. я откатился к этому первоначальному ответу

Ответ №2:

У вас есть массив, вам нужен объект. Попробуйте

  { "notes" : [{"id":39,"data":1},{"id":40,"data":2}] }

поскольку json

или сделайте это 

   alert(noteSet[0]);
  alert(noteSet[1]);

Комментарии:

1. AFAIK — у меня нет контроля над способом. NET сериализует Json. Я использую класс JavaScriptSerializer в ASP.NET

2. @P.Brain Я полагаю, это потому, что вы используете функцию .get. Если вы используете .ajax, вы можете указать протокол, и это также лучше работает с .net, вы могли бы обернуть свои результаты или использовать сериализатор json.

3. @Hogan вы также можете указать протокол с помощью .get при передаче последнего аргумента.

4. @Нил — я только что переместился во времени на 20 месяцев?

5. Да. да, ты всегда это делал ^_^

Ответ №3:

Вот еще одна хорошая библиотека для простого достижения этого: https://github.com/afshinm/Json-to-HTML-Table

Просто передайте данные JSON в эту библиотеку и получите HTML-таблицу:

 //Only first parameter is required
var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');

Ответ №4:

Вы говорите, что используете .NET, чтобы вы могли использовать

 return Json(yourObject, JsonRequestBehavior.AllowGet);

вместо JavaScriptSerializer.
Вам не придется его анализировать.

Ответ №5:

Плагин jquery, который принимает данные JSON для заполнения таблицы, мог бы сделать. jsonTable

Ответ №6:

Вот другой способ, учитывающий заголовки таблицы для типичного запроса к базе данных. На основе ответа Нила:

 $.getJSON('bower.json', {}, function(json_data) {
            var table = $('table');
            $.each(json_data, function(key, item) {
                var table_row = $('<tr>');
                $.each(item, function(itemKey, itemValue) {
                    if (key == 0) {
                        table.append($('<th>', {html: itemKey}));
                    }
                    table_row.append($('<td>', {html: itemValue}));
                });
                table.append(table_row);
            });
        });

Ответ №7:

Попробуйте этот полный код:

 <head>
    <script type="text/javascript">  
    $.getJSON('URL', function(json_data){

        var table_obj = $('table');
        $.each(json_data, function(index, result){
             var table_row = $('<tr>', {});
             var table_cell1 = $('<td>', {html: result.firstName});//result.yourDataAttributes
             var table_cell2 = $('<td>', {html: result.lastName});
             var table_cell3 = $('<td>', {html: result.age});
             table_row.append(table_cell1,table_cell2,table_cell3);
             table_obj.append(table_row);
        })

    });
    </script>
</head>
<body> 
<table id=""></table> 
</body>