Javascript-форум - простой вопрос по json

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - простой вопрос по json (https://javascript.ru/forum/jquery/83769-prostojj-vopros-po-json.html)

простой вопрос по json

Здравствуйте, нужна помощь. Функция выводит на экран товары из файла json. В каждой ячейке товара есть кнопка "купить", к ней привязана функция "buy". Помогите получить значение "cost" соответствующего товара из json при вызове функции "buy".
Код:

function goodsOut(data) {
// вывод на страницу
console.log(data);
var out='';
for (var key in data) {

out+='<div class="single-goods", "col-md-3" id="'+data[key].type+'">';
out+='<a href="'+data[key].link+'"> <h3 class="goodName">'+data[key]['name']+'</h3></a>';
out+='<p>'+data[key]['description']+'</p>';
out+='<a href="'+data[key].link+'"><img src="'+data[key].image+'"></a>';
out+='<div class="row">';
out+='<div class="col-md-6","col-sm-12">';
out+='<p class="price">Цена: '+data[key]['cost']+'&nbsp₽'+'</p>';
out+='</div>';
out+='<div class="col-md-6","col-sm-12">';
out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
out+='<p class="incart"> В корзине </p>';
out+='</div>';
out+='</div>';
out+='</div>';

}

$('#goods').html(out);
$('#goods2').html(out);
$('#goods3').html(out);
$('#goods4').html(out);
$('#goods5').html(out);
$('#goods6').html(out);
$('.add-to-cart').on('click', buy);
}

Dmitry1988,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Dmitry1988,
примерно так...

out +=`<button class="add-to-cart" data-id="${JSON.stringify(data[key])}">Купить</button>`;

let buy = function() {
let obj = this.dataset.id;
let {cost} = JSON.parse(obj);
alert(cost);

}

Можно ведь сразу записать значение cost в свой data-аттрибут...
Тогда ничего парсить не нужно.

спасибо за помощь, уточню вопрос:

"a" : {
    "name" : "coca-cola",
    "cost" : 50,
    "description" : "описание товара 1",
    "image" : "img/Coca-Cola.jpg",
    "type" : "drink",
    "link" : "goods/tb-1.html"
  },
[/json]

[js]
function buy() {
    var id = $(this).attr('data-id');
     console.log(id);

в данном случае функция buy возвращает "a", мне требуется получить значение "cost", как это сделать? Использовать cost как id не вариант.

Dmitry1988,
чем пост #3 не устроил?

консоль ругается на эту строчку
let {cost} = JSON.parse(obj);
Uncaught SyntaxError: Unexpected token d in JSON at position 0

Dmitry1988,
кликать на купить, строка 47 смотрите кавычки

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            let data = {
                "a": {
                    "name": "coca-cola",
                    "cost": 50,
                    "description": "описание товара 1",
                    "image": "img/Coca-Cola.jpg",
                    "type": "drink",
                    "link": "goods/tb-1.html"
                }
            }
            let buy = function() {
                let obj = this.dataset.id;
                let {
                    cost,name
                } = JSON.parse(obj);
                alert([name,cost]);

            }

            function goodsOut(data) {
                // вывод на страницу
                console.log(data);
                let out = '';
                for (let key in data) {


                    out += '<div class="single-goods", "col-md-3" id="' + data[key].type + '">';
                    out += '<a href="' + data[key].link + '"> <h3 class="goodName">' + data[key]['name'] + '</h3></a>';
                    out += '<p>' + data[key]['description'] + '</p>';
                    out += '<a href="' + data[key].link + '"><img src="' + data[key].image + '"></a>';
                    out += '<div class="row">';
                    out += '<div class="col-md-6","col-sm-12">';
                    out += '<p class="price">Цена: ' + data[key]['cost'] + '&nbsp₽' + '</p>';
                    out += '</div>';
                    out += '<div class="col-md-6","col-sm-12">';
                    out += `<button class="add-to-cart" data-id='${JSON.stringify(data[key])}'>Купить</button>`;
                    out += '<p class="incart"> В корзине </p>';
                    out += '</div>';
                    out += '</div>';
                    out += '</div>';

                }

                $('#goods').html(out);
                $('.add-to-cart').on('click', buy);
            }
            goodsOut(data)


        });
    </script>
</head>

<body>
    <div id="goods"></div>
</body>

</html>

спасибо :thanks: