Давайте итерационно:
1. функция
map может иметь 3 аргумента. Вы используете только один. Т.о. в переменной n лежит объект со структурой как в goods.json. [object Object] это как раз попытка вывести значение
data-art="${n}"
2. Полагаю data-art должен выглядеть так, что бы в дальнейшем получить количество:
<button class="minus" data-art="${n.name}">-</button>
3. Понадобиться еще функция:
function getQty(articul) {
// Вернет количество
return cart[articul];
}
4. В результате outputGoods преобразиться в следующее:
function outputGoods(goods) {
document.getElementById("goods").innerHTML = goods
.map(
n => `
<button class="delete" data-art="${n.name}" >x</button>
<img src="${n.image}" width="48">
${n.name}
<button class="minus" data-art="${n.name}">-</button>
${getQty(n.name)}
<button class="plus" data-art="${n.name}">+</button>
${getQty(n.name)}*${n.cost}
`
)
.join("");
document.querySelectorAll("button.add-to-cart").forEach(function(but) {
but.addEventListener("click", addToCart);
});
}
С этим можно работать дальше. :)
