Как заставить JSON работать с JQuery через REST?

Я программист на Python, поэтому не знаю, как это сделать в JavaScript.

Пример ввода (из службы REST, предоставляющей JSON):

[{"name": "foo", "id": 1024}, {"name": "bar", "id": 1025}]

Вывод:

<table>
    <thead>
            <tr><th>name</th> <th>id</th></tr>
    </thead>
    <tbody>
            <tr><td>foo</td> <td>1024</td></tr>
            <tr><td>bar</td> <td>1025</td></tr>
    </tbody>
</table>

Попытка (насколько я понял, сначала попробовал только пример списка из документы JQuery, прежде чем пытаться сделать его таблицей):

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <ul class="my-new-list"></ul>
        <script>
          $.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) {
          var items = [];

          $.each(data, function(key, val) {
            items.push('<li id="' + key + '">' + val + '</li>');
          });

          $('<ul/>', {
            'class': 'my-new-list',
            html: items.join('')
          }).appendTo('body');
        });
        </script>
    </body>
</html>

Я уверен, что это просто какая-то глупая ошибка с моей стороны, но не уверен, что это такое. Не могли бы вы указать это?

Предпочтительно, я бы хотел, чтобы представление, похожее на python, с синтаксисом словаря (возможно, Handlebars может предоставить это?), чтобы я мог просто иди for person in this_list: <tr>person.name</tr>.


json rest jquery handlebars.js getjson
person user1438003    schedule 01.08.2012    source источник
comment
Вы получаете сообщение об ошибке? Вы получаете ответ от сервера?   -  person anAgent    schedule 01.08.2012
comment
Если вы используете JSON между доменами, вы должны изучить и понять JSONP, вот полезная запись в блоге об этом: jquery4u.com/json/jsonp-examples/#.UBmDjMie6z4   -  person Justin Jenkins    schedule 01.08.2012
comment
[в ответ на удаленный ответ]: Да, в основном я хотел бы создать таблицу с этими идентификаторами полей, которые динамически найдены и установлены в качестве заголовков таблицы, а их значения установлены для каждой записи в виде строк таблицы. Скорее всего это общая проблема.   -  person user1438003    schedule 01.08.2012
comment
@anAgent: пустой экран, ничего не происходит.   -  person user1438003    schedule 01.08.2012
comment
@JustinJenkins: я не понимаю, как использовать это в качестве замены вышесказанному, а также все еще не уверен, как превратить это в красивую компоновку таблицы.   -  person user1438003    schedule 01.08.2012

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, ваш jQuery даже не запустится, так как вы никогда не запускали его или не заворачивали во что-то вроде...

$(document).ready(function() { ... });

См. здесь: Знакомство с $(document).ready()< /а>

Во-вторых, вы не можете загрузить JSON из другого домена через Javascript, если не используете JSONP, см.: Объяснение JSONP jQuery с примерами. Обычно вы будете использовать PHP, .Net, Ruby для загрузки JSON на сервер и сделать его доступным для вашего скрипта.

Пример: Обработка данных в объекте PHP JSON

Наконец, javascript/jQuery позволит вам использовать такой синтаксис, как person.name, все зависит от того, как структурирован ваш объект или массив.

Что касается «хорошего» макета, есть так много вариантов, что я не могу начать объяснять их здесь ... но все это будет «нет», если вы даже не можете загрузить данные в первую очередь! :)

Вот старый, но все еще полезный учебник, объясняющий это: http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php

person Justin Jenkins    schedule 01.08.2012

arrow_upward
0
arrow_downward

Здесь есть пара проблем. Джастин Дженкинс уже упомянул о двух самых тяжелых.

В дополнение к этому также уверен, что ответ от сервера представляет собой массив, а не объект. Ваши текущие ответы URL с объектом. Итак, в этом случае вам нужно получить доступ к массиву: здесь $.each(data.Customers ... делает свое дело.

Во-вторых, функция, вызываемая путем перебора массива, получает ключ и значение. Но это не атрибуты объекта, но ключ в этом случае 0...n (индекс массива), а значение - это объект. Поэтому, если вы хотите получить доступ к объектам в массиве, используйте вместо этого val.property.

Тогда код может выглядеть примерно так:

$.getJSON('http://www.servicestack.net/ServiceStack.Northwind/customers?format=json', function(data) {

var items = [];

$.each(data.Customers, function(key, val) {
  items.push('<li id="' + val.id + '">' + val.name + '</li>');
});

$('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

Конечно, при условии, что ваш запрос будет успешным.

Вот jsfiddle, который не использует запрос, но показывает использование функции итерации jquery.

http://jsfiddle.net/jomikr/zg2y5/

person jokr    schedule 01.08.2012