Как правильно извлечь данные из JSON файла?

Question

[IvanRobot]

Создал json файл:

{
  "test" : {
    "x" : "23",
    "y" : "23",
    "img" : [
      {"name" : "01"},
      {"name" : "02"},
      {"name" : "03"}]
  },
  "test2" : {
    "x" : "23",
    "y" : "23",
    "img" : [
      {"name" : "01"},
      {"name" : "02"},
      {"name" : "03"}]
  },
  "test3" : {
    "x" : "23",
    "y" : "23",
    "img" : [
      {"name" : "01"},
      {"name" : "02"},
      {"name" : "03"}]
  },
  "test4" : {
    "x" : "23",
    "y" : "23",
    "img" : [
      {"name" : "01"},
      {"name" : "02"},
      {"name" : "03"}]
  }
}

Теперь пытаюсь извлечь данные и построить html разметку

$.getJSON("../js/districts.json", function(data) {
    for (var i in data) {
      var row = data[i];
      var district = i;
      var img = row.img;
      $('.districts').append("<div id='" + district + "'></div>");
      $("#" + district).append("<div class='popup'></div>");
      for (var i in img) {
        $('.popup').append("<img src=\"/img/" + district + "/" + img[i].name + ".png\">");
      }
    }
  });

Должно было получиться что-то такое:

<div class="districts">
  <div id="test">
    <div class="popup">
      <img src="/img/test/01.png">
    </div>
    <div class="popup">
      <img src="/img/test/02.png">
    </div>
    <div class="popup">
      <img src="/img/test/03.png">
    </div>
  </div>
  <div id="test2">
       <div class="popup">
      <img src="/img/test2/01.png">
    </div>
    <div class="popup">
      <img src="/img/test2/02.png">
    </div>
      ...

Но получается так:

<div class="districts">
  <div id="test">
    <div class="popup">
      <img src="/img/test/01.png">
      <img src="/img/test/02.png">
      <img src="/img/test/03.png">
      <img src="/img/test2/01.png">
      <img src="/img/test2/02.png">
      ...

Видимо, я не правильно строю циклы.. Подскажите, пожалуйста, как правильно настроить вывод.

Answer 1

[Денис]

var root = $('<div class="districts" />'),
    box, child;
for (var k in data) {
    if (data.hasOwnProperty(k)) {
        box = $('<div class="popup" />');
        child = $('<div calss="' + k + '" />').appendTo(box);
        for (var i in data[k].img) {
            if (data[k].img.hasOwnProperty(i)) {
                $('<img src="/img/' + k + '/' + data[k].img[i].name + '.png" />').appendTo(child);
            }
        }
        box.appendTo(root);
    }
}

$('body').append(root); // выводим на экран
// (!) при этом, выводим один раз, а не мучаем DOM на каждой итерации

Результат будет следующим:

<div class="districts">
    <div class="popup">
        <div calss="test">
            <img src="/img/test/01.png">
            <img src="/img/test/02.png">
            <img src="/img/test/03.png">
        </div>
    </div>
    <div class="popup">
        <div calss="test2">
            <img src="/img/test2/01.png">
            <img src="/img/test2/02.png">
            <img src="/img/test2/03.png">
        </div>
    </div>
    <div class="popup">
        <div calss="test3">
            <img src="/img/test3/01.png">
            <img src="/img/test3/02.png">
            <img src="/img/test3/03.png">
        </div>
    </div>
    <div class="popup">
        <div calss="test4">
            <img src="/img/test4/01.png">
            <img src="/img/test4/02.png">
            <img src="/img/test4/03.png">
        </div>
    </div>
</div>

UPD Чуть подправил, т.к. не заметил еще один элемент с классом popup

Comments

[IvanRobot]

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

[Денис]

var root = $('<div class="districts" />'),
    box;
for (var k in data) {
    if (data.hasOwnProperty(k)) {
        box = $('<div calss="' + k + '" />');
        for (var i in data[k].img) {
            if (data[k].img.hasOwnProperty(i)) {
                $('<div class="popup" />')
                    .html('<img src="/img/' + k + '/' + data[k].img[i].name + '.png" />')
                    .appendTo(box);
            }
        }
        box.appendTo(root);
    }
}

[IvanRobot]

Денис: Огромное спасибо!
P. S. Первую строчку заменил на var root = $('.districts')

[IvanRobot]

Денис: не могу получить доступ к файлам toster.ru/q/338621

Answer 2

[tema_sun]

img[i].name

Comments

[IvanRobot]

ок, а как быть с директориями?

[IvanRobot]

в каждый .popup скидываются вообще все картинки