Как значения свойств вложенных объектов раскидать по элементам?

Question

[Kusmich]

Есть объект:

var json_date = {
   "dills": {
     "1": {
       "name": "boock_1",
       "time": "15:00",
     },
     "2": {
       "name": "book_2",
       "time": "15:00",
     },
     "3": {
       "name": "book_3",
       "time": "09:00",

     },
     "4": {
       "name": "book_4",
       "time": "05:00",
     }
   }
 }

Надо значения name и записать в <h1>, чтобы получилось так:

<li class="block_1"><h1>boock_1 </h1>   </li>
<li class="block_2"><h1>boock_2 </h1>   </li>
<li class="block_3"><h1>boock_3 </h1>   </li>

Я вот так пробовал:

$("li > h1").each(function(i) {
  $(this).html(val.name + " ");
});

Но во все h1 вставляется последнее значение name.

Answer 1

[Alex]

Почему бы не сделать вот так?
https://jsfiddle.net/sxzk9ooa/1/

Answer 2

[Александр Вульф]

$("li > h1").each(function(i) {
  $(this).html(json_date.dills[i].name + " ");
});

Comments

[Kusmich]

Ругается , что не может получить свойство name

[Сергей]

Kusmich: Мб добавить i+1 json_date.dills[i+1].name

[Александр Вульф]

Kusmich: вместо [i] пиши [i+1]

Answer 3

[Денис Инешин]

Зачем делать так через Ж. Воспользуйтесь шаблонизатором: handlebarsjs.com, akdubya.github.io/dustjs

Comments

[Kusmich]

Ток обучаюсь js поэтому стараюсь делать все руками. Чтоб максимально понимать как все работает. Тем более это нужно для виджета а не для сайта.