Подскажите как правильно обрабатывать JSON данные в jquery

262
12 декабря 2016, 10:05

Впервые столкнулся с обработкой json данных. Нашел простой пример и вроде бы разобрался. Вопрос только как обработать вложенные массив в данных?

Сами данные JSON для примера вот такие, вся проблема в обработки данных "items":

{   
"total": 2,
"module": "content",
"method": "getComplectItems",
"items": {
    "item": {
        "0": {
            "ide": "1",
            "namesmall": "11namr3rfd1",             
            "group": "1gr1"
        },
        "1": {
            "ide": "2",
            "namesmall": "222namr3rfd1",                
            "group": "2gr1"
        }
    }
}

}

Обрабатываю кодом:

$.getJSON('http://online.fteplo.ru/udata://content/getComplectItems.json?pid=1', function(data) {
    var items = [];     
    $.each(data, function(key, val) {
        items.push('<li id="' + key + '">' + val + '</li>');        
    });
    var result = $('<ul/>', {
         html: items.join('')
    });
    $("#g1").html(result);
});
Answer 1

По моему проще всего делать как то так:

$.post(url,function(data){ 
  
    data.items.forEach(function(item){ 
       str += '<li id="'+item.ide+'">'+item.namesmall+'</li>'; 
    }); 
 
},'json');

Answer 2

Мне кажется, у вас json не корректный, массив это квадратные скобки []

{   
"total": 2,
"module": "content",
"method": "getComplectItems",
"items": [
        {
            "ide": "1",
            "namesmall": "11namr3rfd1",             
            "group": "1gr1"
        },
        {
            "ide": "2",
            "namesmall": "222namr3rfd1",                
            "group": "2gr1"
        }
    ]
}

и в скрипте опечатка data и result

Answer 3

Тут нужна рекурсия. Вот как с помощью рекурсии вывести json:

var json={    
"total": 2, 
"module": "content", 
"method": "getComplectItems", 
"items": { 
    "item": { 
        "0": { 
            "ide": "1", 
            "namesmall": "11namr3rfd1",              
            "group": "1gr1" 
        }, 
 
        "1": { 
            "ide": "2", 
            "namesmall": "222namr3rfd1",                 
            "group": "2gr1" 
        } 
    } 
 } 
}; 
 
$("#g1").html(recursive(json));     
 
function recursive(data){ 
    var items = []; 
    $.each(data, function(key, val) { 
        if(typeof val == 'object'){ 
            items.push('<li id="' + key + '">' + key +':' + recursive(val) + '</li>'); 
        }else{ 
          items.push('<li id="' + key + '">' + key +':' + val + '</li>'); 
        } 
    }); 
    var result = '<ul>'+items.join('')+'</ul>'; 
    return result; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="g1">Fail</div>

Думаю на базе этого вы уже дойдете до нужного результата сами.

READ ALSO
Выпадающий список. JQuery
jQuery

Выпадающий список. JQuery

Есть списокКак видно из изображения с проблемами

 319
Как получить значение с input&#39;ов?
jQuery

Как получить значение с input'ов?

Есть 10 input'ов:

 223
Таймер с часовыми поясами
jQuery

Таймер с часовыми поясами

Есть таймер на сайте, провожу турниры по одной игре, турниры должны начинаться каждый раз в 20-00 по московскому времени, проблема в том что...

 258
Как отправить данные в Форму Google, используя свою форму и AJAX?
jQuery

Как отправить данные в Форму Google, используя свою форму и AJAX?

Нашла интересный тюториал https://wikibase22

 318