Как в js правильно сделать объект для корзины?

Question

[Максим Тимофеев]

Корзина храниться в localStorage, а следовательно в виде json. Какая структура будет более правильной, что бы оперировать удобно данными.
Вначале была идея:

product_1: {count:1, title: 'title'},
product_2: {count:1, title: 'title'},
articul_1: {count:1, title: 'title'},

продукт и артикул разные сущности, так надо не вникайте, не важно, важно что сущностей несколько и у них есть id, уникальные для каждой сущности.
Тут просто определять, есть ли уже такая сущность в корзине и т.д. Но как я обнаружил, js в json это упорно загонять не хочет.
JSON.stringify(cart); //дает пустой массив
И вот вопрос: дайте пожалуйста метод загнать это в json или тыкните носом в другой метод.
Вариант с

0: {item: 'product_1', count:1, title: 'title'},
1: {item: 'product_2', count:1, title: 'title'},
2: {item: 'atricul_1', count:1, title: 'title'},

не будет иметь проблем в json, но как без мук определять наличие и ключ элемента, например имеем "product_1" и надо в этом массиве найти нет ли элемента с этим item. Я вижу только перебор, но должен же быть более адекватный способ.
Заклинило, уже 2 часа хожу кругами с бубном. Видимо php мешает думать про js.

Comments

[Kovalsky]

var cart = {
  product_1: {count:1, title: 'title'},
  articul_1: {count:1, title: 'title'}
}

console.log( JSON.stringify(cart) ); // "{"product_1":{"count":1,"title":"title"},"articul_1":{"count":1,"title":"title"}}"

localStorage.setItem('cart', JSON.stringify(cart) );

cart = JSON.parse( localStorage.getItem('cart') );

Вроде всё норм, или я неправильно понял?

К тому же если структура данных товара неизменна, то эффективней будет использовать массивы:

cart = {
  product_1: [ 1, 'title' ],
  articul_1: [ 7, 'new title' ]
}

[Максим Тимофеев]

Никита Полевой: хз, у меня не все норм. Ща постараюсь отловить отличие от Вашего примера, вроди бы все так же, но видимо нет.

Answer 1

[Александр Моргунов]

Ты прав, перебор в помощь. Вообще в плане клиентской части переборы не так страшны, браузер запускает кучу потоков для вычислений своих и делает любой перебор достаточно быстро. Другое дело сохранять и вытаскивать все это добро из локального хранилища. Тут больше времени будет уходить, чем на поиск значений.

Comments

[Максим Тимофеев]

Спасибо за аргументированный ответ.

[Александр Моргунов]

Максим Тимофеев: Напомню, что json объект можно рассматривать как массив. Ты можешь все продукты сохранять в json объект. А их id (или номер), будет тем самым key к которому прикреплена вся инфа.

{ key_1: { name: "name", price: "price", quantity: 0 }, { ... }, ... }

Так сможешь хранить хранить кучу разномастных объектов и иметь к ним быстрый доступ. При условии, если тебе это подходит. Как вариант №2.
Если ключ приходит в переменную ввиде строки, то ты можешь его использовать в виде индекса массива:
cart["key_1"]
P.S.: JSON.stringify() - превращает объект в строку. Если надо получить объект, то используй JSON.parse().

[Максим Тимофеев]

Александр Моргунов: спс

Answer 2

[Егор Живагин]

Второй вариант, а при добавлении в корзину проверять наличие данного товара в ней:

var already = false;

cart.forEach(product=>{
    if (product.item == 'product_1' ) {
        already = true;
        // такой продукт уже в корзине
    }

    if (already) {
        ....
    } else {
       ....
    }
})

Comments

[Максим Тимофеев]

Да видимо так и буду городить. Мне казалось, что это как-то криво и не оптимально, но видимо это единственный вариант.

[Егор Живагин]

Максим Тимофеев: что-то не то...

Самый логичный вариант -

cart = {
product_1: {...},
product_2: {...},
...
}

И у меня JSON.stringify(cart); Вполне себе нормально работает .

Пример из консоли:

var cart = {
product_1: {
	name: 'lol1',
	field: 'qwe1'
	},
product_2: {
	name: 'lol2',
	field: 'qwe2'
	}
};

var loot = JSON.stringify(cart); 
var pars = JSON.parse(loot);
console.log(loot, pars);

[Максим Тимофеев]

Егор Живагин: нашел причину.
Не работает var cart = [];
Работает var cart = {};

[Егор Живагин]

Максим Тимофеев: А, ну да, это ж объект. Бывает)

[Максим Тимофеев]

Егор Живагин: Да. Долго копался, пока заметил. Обожаю такие ошибки и не люблю за это js. Хрен найдешь.

Answer 3

[Maxim Nepritimov]

Посмотри в сторону библиотеки Immutable.js.
Извлекать, добавлять и проверять наличие данных в иммутабельном объекте - сплошное удовольствие.
P.S.: конвертация в JSON присутствует. Документация у библиотеки шикарная.

Comments

[Максим Тимофеев]

Интересное решение, но это доп либа, ради одной задачи, хотя если весь проект завязать может и оправдано будет. В любом случае спс, интересно.