0

Столкнулся с проблемой вывода данных из JSON по id. Задача: в модальном окне получить данные определённого объекта по клику на кнопку, к примеру с data-id=1 и т.д

JS:

function init() {
$.getJSON("card.json", jsonOut);
}

function jsonOut(data) {
console.log(data);
var out='';
for (var key in data) {
    out +=`<h2 class="title">${data[key].name}</h2>`;
    out +=`<p class="description">${data[key].description}</p>`;
}
$('.outJson').html(out);
}

$(document).ready(function () {
init();

});

JSON

{
"1" : {
    "name"  : "Name 1",
    "description  : "Description 1", 
    "id"    : 1
},
"2" : {
    "name"  : "Name 2",
    "description  : "Description 2", 
    "id"    : 2
},
"3" : {
    "name"  : "Name 3",
    "description  : "Description 3", 
    "id"    : 3
}
}

В данный момент выводит весь список объектов.

 <button data-id="1"></button>
 <div class="outJSON">
 Name 1
 Description 1

 Name 2
 Description 2

 Name 3
 Description 3
 </div>

Т.е, отсортировать нужный объект по id. В гугле ничего подобного не могу найти, помогите ссылкой на подобный вопрос, или же готовым вариантом. Спасибо!

1 ответ 1

1

Лучше всего чтобы ключ объекта и был id, это сильно упрощает поиск, иначе только перебором:

const json = {
  "1": {
    "name": "Name 1",
    "description"  : "Description 1 ", 
    "id": 1
  },
  "2": {
    "name": "Name 2",
    "description"  : "Description 2 ", 
    "id": 2
  },
  "3": {
    "name": "Name 3",
    "description"  : "Description 3 ", 
    "id": 3
  }
};
const out = document.getElementById('out');
document.querySelectorAll('[data-btn]').forEach(function(item) {
  item.addEventListener('click', function() {
    const id = parseInt(this.getAttribute('data-btn'));
    for (let i in json) {
      if (json[i].id === id) {
        out.innerHTML = `
          ${json[i].name}<br/>
          ${json[i].description}<br/>
        `
        return;
      }

    }
  })
});
<button data-btn="1">1</button>
<button data-btn="2">2</button>
<button data-btn="3">3</button>
<p id="out"></p>

4
  • Только как это значение записать в тег <p> а не в input? Commented 24 янв. 2019 в 19:32
  • И получается что выводит конкретно "name" а не весь список значений. Commented 24 янв. 2019 в 19:43
  • Огромное спасибо!) Commented 24 янв. 2019 в 21:39
  • @Виктор если мой ответ вам помог, вы можете его принять, нажав на галочку под рейтингом ответа Commented 25 янв. 2019 в 8:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.