Как реализовать подгруздку значений в блок при клике?

Question

[Kusmich]

Есть обект с которого берется значение и вставляется в тег. Но так как тега всего 3, должно быть в разметки , и само собой всю информацию сразу показать не удастся , нужно чтоб информация подгружалась по очереди. Как правильно сделать чтоб например при клике брались следующие значения с объекта и записывались в тег а предыдущие удалялись ?

например есть 4 объекта name , а тегов h1 всего 3 . Как сделать такую функцию чтоб при клике, брлось значение следующего объекта , записывалось в h1 а то что было удалялось ?

Вот сам обект:

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",

    }
  }
}

//Функция которая подгружает значения в теги :

var ix = 0;

$.each(json_date['dills'], function(key, val) {



  $('li > h1').eq(ix++).text("").text(val.name);
  console.log(ix);
});

фидл : https://jsfiddle.net/sxzk9ooa/6/

Answer 1

[Maxim Nepritimov]

Как понял, так и показываю: тыц
HTML:

<p></p>
<input class="js-but" type="button" value="my_button" />

JS:

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",

    }
  }
}

var ix = 1;
$('.js-but').on('click', function () {
    var valName = json_date.dills[ix].name;
    $('p').text(valName);
    ++ix;
});