КАК ВЫВЕСТИ ТОВАР из json ПО КАТЕГОРИЯМ = тут пример

Вопрос-ответ JavaScript
1

image
image.png1600×900 67 KB

подскажите пожалуйста, как вывести по категориям, уже какие-только конструкции не создавал - не могу додуматься.

К О Д - J S O N:
{

"01" : {
    "name" : "Апельсины",
    "cost" : 250,
    "categoryId" : "Фрукты"
},
"02" : {
    "name" : "Картошка",
    "cost" : 50,
    "categoryId" : "Овощи"
},
"03" : {
    "name" : "Кока-кола",
    "cost" : 350,
    "categoryId" : "Напитки"
}

}

К О Д - J S:

$(‘document’).ready(function(){
loadGoods();
});

function loadGoods() {
$.getJSON(‘product/goods.json’, function (data) {
var out = ‘’;
for (var tt in data){

        out+='<h3>'+data[key]['name']+'</h3>'; 

        out+='<p>Цена: '+data[key]['cost']+' руб.</p>';
    }
    
$('#good-1').html(out); /*-сюда надо овощи*/
$('#good-2').html(out); /*-сюда надо фрукты*/
$('#good-3').html(out); /*-сюда надо напитки*/

 });
    };
2

переменные разные стоят, это я для форума менял что бы понятнее было, и невезде поменял (только увидел). но суть в другом, как вывести по категориям

3

Имеешь в виду что-то вроде такого?

Имя категории 1
    - вещь 1
    - вещь 2
    - вещь 3
Имя категории 2
    - вещь 1
    - вещь 2
    - вещь 3

не понятно из описания как должен выглядеть конечный результат

4

да, всё верно. хочу что бы :

  1. от сюда выходила категория - $(’#good-1’).html(out);
  2. здесь выходила вторая котегория - $(’#good-2’).html(out);
  3. здесь третяя - $(’#good-3’).html(out);
5

Я исхожу из того что

  1. Категорий может быть неизвестное количество. Может 1, может 15.
  2. В одной категории может быть несколько товаров.

Стратегия - преобразовать данные в такой вид чтобы ключами объекта было название категории, а значением - массив товаров. Тогда отобразить категории товаров будет простой задачей.

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":"Напитки"}]}"
1 лайк
6

мне нужно в json так и писать ?

var data = {
“01”: {
“name”: “Апельсины”,
“cost”: 250,
“categoryId”: “Фрукты”
},
“02”: {
“name”: “Картошка”,
“cost”: 50,
“categoryId”: “Овощи”
},
“03”: {
“name”: “Кока-кола”,
“cost”: 350,
“categoryId”: “Напитки”
}
}

7

Нет. Это я сделал для демонстрации того как выглядит результат функции с такими входными данными. Данные нужно получать как и получал: из json файла. Я исходил из структуры которая у тебя уже есть в json файле.

8

я понял, сейчас попробую применить это

9

по началу вчера что то получилось, но по категориям не получилось. сейчас вообще перестала все выводить, из-за многочисленных изменений, я сбился с толку. помоги пожалуйста https://codepen.io/vlad-alad/pen/yrbgYx

10

хотя вот такое нашёл:

let res = data.filter(e => e.categoryId == “напитки”);

let div = document.getElementById(‘goods-1’);

for(let i = 0; i < res.length; i++) div.innerHTML += res[i].productName + ‘
’;

сейчас попробую использовать

11

Добрый день!

2 лайка
12

добрый день. сейчас попробую применить

13

в консоль выводет так, как и надо. пытаюсь вывести в документ через индикатор - так: .innerHTML, и так: $(’#goods’).html().
ни как не получается.
подскажите пожалуйста как вывести

14
15

В html пишите полную структуру документа
Если используете JQuery, то надо его сперва подключить через тэг script.
И почитайте про методы jquery работы с DOM:
https://api.jquery.com/category/manipulation/dom-insertion-inside/

2 лайка
16

спасибо. сейчас прочитаю, и проэкспереминтирую

17

успешно внедрил и подключил всё.
только иногда почему-то незагружаются товара на страницу. несколько раз нужно перезагрузить страницу, и потом появляются. в консоле не выводит ошибок.

и скажите пожалуйста, можно как нибудь уникальный класс или индикатор присвоить каждой категории?
я пробывал так : let outt = ‘

’+category+’

’;
но так не получается, показывает последний ключ массива у всех категорий.
а если делать : += , то вообще все исчезает
18

(сообщение отозвано автором и будет автоматически удалено в течение 24 часов, если только на сообщение не поступит жалоба)

19

Рад что получается! Но все же - ИДЕНТИФИКАТОР, а не индикатор.
Его можно задать в момент формирования заголовка категории
let i=0;
let out = “<h3 id=‘cat"+(++i)+"’>”+category+"";
или с помощью jquery-метода attr()
http://jsfiddle.net/jquerybyexample/CAbTY/

1 лайк