Парсинг JSON в JavaScript

Question

Добрый день.

Нужно распарсить JSON с помощью JavaScript. Делаю вот так:

var items = [];
jQuery.getJSON( url, function( json ) {
    jQuery.each(json.posts, function(key, index) {
        loc = index.custom_fields.map_coords[0];
        items.push(loc);
    });
});
console.log(items);

Если пытаюсь вывести console.log(items[0]), то получаю undefined. Возможно уже глаз замылился, но я не понимаю, как мне добраться до значений.

Дело в том, что эти значения потом должны использоваться, а я получаю undefined и ничего не могу с этим поделать.

На момент вызова console.log запрос к серверу ещё даже не отправился, потому что он асинхронный. Вы должны поставить console.log сразу после jQuery.each(...); — andreymal, Mar 09 '17 at 12:36
дело даже не в console.log, как мне использовать полученные данные потом. так же пихать всё после each? не дело же. — zagazat, Mar 09 '17 at 12:38
дак вынесите function(json){...} в отдельную функцию и там и пишите. — teran, Mar 09 '17 at 12:40
Возможный дубликат вопроса: Как вернуть значение из события или из функции обратного вызова? — vp_arth, Mar 09 '17 at 12:40
@zagazat дело, только так и можно делать, в том суть джаваскриптовой асинхронности) Ну и да, вынести всё в отдельную функцию и вызвать её после each никто не запрещает — andreymal, Mar 09 '17 at 12:42

Kostiantyn Okhotnyk · Answer 1 · 2017-03-09T12:50:11.317

Ну во-первых Ваш код асинхронный. Это значит, что в items будут значения только после того, как выполнится запрос.

То есть Ваш код должен будет выглядеть так:

var items = [];
jQuery.getJSON( url, function( json ) {
   jQuery.each(json.posts, function(key, index) {
       loc = index.custom_fields.map_coords[0];
       items.push(loc);
   });
   console.log(items);
});

Во-вторых. Не факт что он у Вас выполниться - нужно добавить обработку ошибок:

var items = [];
jQuery.getJSON( url, function( json ) {
   jQuery.each(json.posts, function(key, index) {
       loc = index.custom_fields.map_coords[0];
       items.push(loc);
   });
   console.log(items);
})
.fail(function() {
    console.log( "error" );
 })

Вопрос как работать с item дальше. Вариантов несколько - через обещания или callback-функции.

Пример с callback-функцией.

var items = [],
callbacks = $.Callbacks();

callbacks.add(function () {
   console.log(items);
}) 


jQuery.getJSON( url, function( json ) {
   jQuery.each(json.posts, function(key, index) {
       loc = index.custom_fields.map_coords[0];
       items.push(loc);
   });
   callbacks.fire();
   console.log(items);
})
.fail(function() {
    console.log( "error" );
 })

Парсинг JSON в JavaScript

1 Answers1