Как вывести из одного json файла cодержимое одного обьекта на одну html cтраницу а содержимое другого обьекта на другую html страницу?
Есть один мужской товар (рубашка) и один женский товар (платье) в файле goods.json.
Нужно чтобы при открытии страницы man.html отобразилась мужская рубашка а при открытии страницы woman.html отобразилось платье. Как реализовать это? (без использования jquery) Что добавить в мой код?
eshop.js:
document.addEventListener('DOMContentLoaded', function (e) {
loadGoods();
});
function loadGoods() {
$.getJSON('goods.json', function (data) {
var out = '';
for (var key in data){
out+='<div class="single-goods">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<img src="'+data[key].image+'">';
out+='<p>Цена: '+data[key]['cost']+'</p>';
out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
out+='</div>';
}
document.getElementById('goods').innerHTML = out;
document.querySelectorAll('button.add-to-cart').forEach(function(but) {
but.addEventListener("click",addToCart);
})
});
}
goods.json:
{
"Рубашка №1" : {
"name" : "Рубашка №1",
"cost" : 1000,
"country" : "argentina",
"image" : "images/1.jpg",
"brand": "M"
},
"Платье №1" : {
"name" : "Платье №1",
"cost" : 1000,
"country" : "brazil",
"image" : "images/a.jpg",
"brand": "L"
}
}
man.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="index.html">на главную cтраницу</a>
<div id="mini-cart"></div>
<div id="goods"></div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/eshop.js"></script>
</body>
</html>
woman.html:
//такой же код как и в man.html