Как сгруппировать несколько объектов JSON с одинаковыми именами и отобразить эти группы отдельно?

Question

Как сгруппировать несколько объектов JSON с одинаковыми именами и отобразить эти группы отдельно?

0

Может кто-нибудь, пожалуйста, поможет выяснить, как я могу группировать и отображать объекты JSON? Вот мой пример: например, у меня есть файл JSON с именем "results.php":

[
    { "name": "project1", "url": "picture1-1.jpg"},
    { "name": "project1", "url": "picture1-2.jpg"},
    { "name": "project2", "url": "picture2-1.jpg"},
    { "name": "project3", "url": "picture3-1.jpg"},
    { "name": "project1", "url": "picture1-3.jpg"},
    { "name": "project4", "url": "picture4-1.jpg"},
    { "name": "project3", "url": "picture3-2.jpg"},
    { "name": "project1", "url": "picture1-4.jpg"}
]

И я хочу отображать все эти проекты в отдельных div, т.е. Проект 1 должен содержать только изображения picture1-1.jpg, picture1-2.jpg, picture1-3.jpg и picture1-4.jpg и т.д. Для каждого проекта. Я попытался использовать этот код для отображения данных JSON в цикле, и он отлично работает:

var source="results.php";
  $.getJSON(source,function(json){
      $.each(json, function(i,post){

        if (post.name)
        $(".body-wrapper").append('<div class="post"><h1>'+post.name+'</h1><p>'+post.url+'</p></div>');
      });
  });

Но я все еще не могу понять, как отображать данные JSON отдельно для каждого проекта в файле JSON.

Надеюсь, вы поможете мне решить эту проблему. Я был бы очень благодарен за это.

Заранее спасибо! :)

С наилучшими пожеланиями, Алекс

Nekto 16 апр. 2014, в 02:58

Источник

0

У вас есть контроль над выводом из файла PHP? Я бы изменил это, чтобы вернуть разумную структуру данных, а не пытаться связываться с этими плохо структурированными данными в javascript.
Mike Brant 16 апр. 2014, в 00:46

Теги:

jquery

json

getjson

2 ответа

1

Это можно решить множеством способов, но я бы принял это по-другому:

$.getJSON('http://yourdomain.com/results.php', function(data){
    $.each(data, function(index, element){
        if(!$('div.' + element.name)[0]) {
            $('.container').append('<div class="box '+element.name+'"></div>');
            $('div.' + element.name).append('<h1>'+element.name+'</h1>');
        }
        $('div.' + element.name).append('<p>'+element.url+'</p>');
    });
});

Пример скрипта

user1978142 15 апр. 2014, в 22:26

1

Привет Кевин, большое спасибо за помощь. Я сделал твой ответ :)
Nekto 22 апр. 2014, в 14:48

Ещё вопросы

У вас есть контроль над выводом из файла PHP? Я бы изменил это, чтобы вернуть разумную структуру данных, а не пытаться связываться с этими плохо структурированными данными в javascript.
Привет Кевин, большое спасибо за помощь. Я сделал твой ответ :)

Callum Linington · Accepted Answer · 2014-04-15T23-04-00.000Z

эта скрипка группирует их по имени. Используйте CTRL + J в chrome, чтобы увидеть консольный вывод сгруппированного JSON

$.each(array, function (i, item) {  // iterate your JSON array  
    var foundItem = false; // track if an item exists in your new array
    $.each(separateArray, function (y, newItem) { // iterate your new array
        if (newItem.name == item.name) { // if there is an item with the same name
            if (!(newItem.url instanceof Array)) { // check if the url is an array
                newItem.url = [newItem.url]; // if not, then make it an array
            }
            newItem.url.push(item.url); // push the url as an array
            foundItem = true; // notify that the item is found and we dont have to add it
        }
    });

    if (!foundItem) { // if no item is found
     separateArray.push(item);    // push this item into our new array
    }
});

Мне лично нравится использовать нокаут для привязки данных к представлению. Вот что я сделал, используя нокаут

Я помещал $.getJson в viewModel таким образом, когда инициализация нокаута viewModel запрос ajax, а затем заполняет привязанный массив.

var viewModel = function () {
    var self = this;

    self.displayArray = ko.observableArray([]);

    $.getJSON("/echo/json/",function(json){
        // here obviously you put json through that groupJson function
      self.displayArray(groupJson());
  });
}

Таким образом, вам не нужно пытаться самостоятельно создавать html-экран и предсказывать, как он будет выглядеть, когда страница полностью отображается. Нокаут будет создавать элементы HTML, где это необходимо (если вы использовали, например, foreach).

Таким образом, вы все еще можете увидеть дизайн своей страницы в HTML и как она будет соответствовать всем остальным.

Большое спасибо за столь быстрый ответ! Честно говоря, я никогда не работал с knockout.js раньше. В любом случае, я постараюсь использовать ваше решение завтра :)
@ Нет проблем, пожалуйста, дайте мне знать, как вы поживаете!