Категорий может быть неизвестное количество. Может 1, может 15.
В одной категории может быть несколько товаров.
Стратегия - преобразовать данные в такой вид чтобы ключами объекта было название категории, а значением - массив товаров. Тогда отобразить категории товаров будет простой задачей.
function categorise(data) {
var res = {}
for (var key in data) {
var goodsItem = data[key]
var categoryName = goodsItem.categoryId
if (!res[categoryName]) {
res[categoryName] = []
}
res[categoryName].push(goodsItem)
}
return res
}
var data = {
"01": {
"name": "Апельсины",
"cost": 250,
"categoryId": "Фрукты"
},
"02": {
"name": "Картошка",
"cost": 50,
"categoryId": "Овощи"
},
"03": {
"name": "Кока-кола",
"cost": 350,
"categoryId": "Напитки"
}
}
console.log(categorise(data)) // "{"Фрукты":[{"name":"Апельсины","cost":250,"categoryId":"Фрукты"}],"Овощи":[{"name":"Картошка","cost":50,"categoryId":"Овощи"}],"Напитки":[{"name":"Кока-кола","cost":350,"categoryId":"Напитки"}]}"
Нет. Это я сделал для демонстрации того как выглядит результат функции с такими входными данными. Данные нужно получать как и получал: из json файла. Я исходил из структуры которая у тебя уже есть в json файле.
по началу вчера что то получилось, но по категориям не получилось. сейчас вообще перестала все выводить, из-за многочисленных изменений, я сбился с толку. помоги пожалуйста https://codepen.io/vlad-alad/pen/yrbgYx
в консоль выводет так, как и надо. пытаюсь вывести в документ через индикатор - так: .innerHTML, и так: $(’#goods’).html().
ни как не получается.
подскажите пожалуйста как вывести
успешно внедрил и подключил всё.
только иногда почему-то незагружаются товара на страницу. несколько раз нужно перезагрузить страницу, и потом появляются. в консоле не выводит ошибок.
и скажите пожалуйста, можно как нибудь уникальный класс или индикатор присвоить каждой категории?
я пробывал так : let outt = ‘
’+category+’
’;
но так не получается, показывает последний ключ массива у всех категорий.
а если делать : += , то вообще все исчезает
Рад что получается! Но все же - ИДЕНТИФИКАТОР, а не индикатор.
Его можно задать в момент формирования заголовка категории
let i=0;
let out = “<h3 id=‘cat"+(++i)+"’>”+category+"";
или с помощью jquery-метода attr() http://jsfiddle.net/jquerybyexample/CAbTY/