Получить данные объекта по id из JSON в html

Столкнулся с проблемой вывода данных из 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. В гугле ничего подобного не могу найти, помогите ссылкой на подобный вопрос, или же готовым вариантом. Спасибо!