Вывод cодержимого одного json файла на две html страницы?
Как вывести из одного 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 |
nathan111777, ситуация конечно бестолковая... Такого быть не должно.
Но если как упражнение какое-то... Тогда, как вариант, можно прочитать название страницы и послать в функцию аргумент равный одному из - Рубашка №1 - Платье №1 Далее, без всякого цикла, просто использовать указанный ключ... |
Как реализовать это кодом? Я просто только начинаю изучать JS...Приведите пожалуйста хоть маленький пример кода как это реализовать...
А про ситуацию, просто мне нужно чтобы все товары хранились в одном json файле а не в разных json файлах... |
Цитата:
Зачем грузить всю информацию, когда нужна только часть? |
Цитата:
document.addEventListener('DOMContentLoaded', function (e) {
var o={
'man.html': 'Рубашка №1',
'woman.html': 'Платье №1'
};
var key=top.location.href;
key=key.match(/[^\/]+$/);
key=o[key];
loadGoods(key);
});
function loadGoods(Key) {
$.getJSON('goods.json', function (data) {
var out = '';
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);
})
});
}
Но если данных будет много - это не выход из ситуации... :no: |
ну пока делаю сайт для портфолио, то думаю закинуть 8 мужских рубашек и 8 женских платьев.
Просто на моем сайте есть корзина товаров cart.html в которую добавляюю товары, пробовал создать отдельный файл json для женских товарова и копию eshop.js то начались проблемы с localstorage...когда-то давно посоветовали взять и все обьекты поместить в один json файл что б не было ошибок с localstorage |
nathan111777, желательно получать только нужные на странице данные...
А ты собираешься грузить как женское, так и мужское. У тебя серверной "части" нет совсем? |
я учусь на front-end developer, а потому серверной части нет, знаю что это делается на серверной части но все равно хочу доделать это потому что сайт уже на 90% готов, а это мини интернет магазин.
а что делает эта строка? key=key.match(/[^\/]+$/); почему так много символов в круглых скобках? для чего они? |
Цитата:
https://javascript.ru/string/match Цитата:
|
я вот подумал а если например добавлю в json 8 мужских товаров и 8 женских,а что если
1) пронумеровать объекты(назвать их числом) в файле json мужские от 1 до 8 а женские от 8 до 16. 2) в обьекте "o" свойству man.html присвоить значение от 1 до 8. а свойству woman.html присвоить значение от 8 до 16. Так можно или свойство может принимать только одно значение? Если можно то как это сделать? |
| Часовой пояс GMT +3, время: 17:55. |