Как добавить второй код к первому, чтобы объекты хранились в json файле а не массиве?

[nathan111777]

У меня есть первый код сохраняющий товары (объекты) в файле JSON а с помощью JS вывожу их на страницу, также эти товары можно добавить в мини-корзину (на текущей странице) и в корзину на отдельной странице (но скрипт который выполняет добавление товара в корзину на другой странице не пишу - потому что не касается темы), а еще в зависимости от того какая открыта страница man.html (мужские товары) или woman.html (женские товары) выводятся на экран товары только мужские или только женские.

man.html:

<div id="mini-cart"></div>
<div id="goods"></div>

<script>var sex = 'male'</script>

woman.html:

<div id="mini-cart"></div>
<div id="goods"></div>

<script>var sex = 'male'</script>

eshop.js:

var cart = {}; 
document.addEventListener('DOMContentLoaded', function (e) {               
  loadGoods();
  checkCart();       
  showMiniCart();
});

function loadGoods() {
    $.getJSON('goods.json', function (data) {
        
        var out = '';
        for (var key in data){
            if (data[key]['sex'] != sex) { continue; } //проверяет какая страница открыта
            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);
})
    });
}

function addToCart() {
   var articul = this.getAttribute('data-art');   
    if (cart[articul]!=undefined) {
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
   showMiniCart();
}

function checkCart(){
    if ( localStorage.getItem('cart') != null) {
        cart = JSON.parse (localStorage.getItem('cart'));
    }
}

function showMiniCart(){
    var out ='';
    for (var w in cart){
        out += w + ' --- '+cart[w]+'<br>';
    }
    out+='<br><a href="cart.html">Корзина</a>';
    document.getElementById('mini-cart').innerHTML = out;     
}

goods.json:

{
  "Рубашка №1" : {
      "sex" : "male",
    "name" : "Рубашка №1",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/1.jpg",
    "brand": "M"
  },
  "Рубашка №2" : {
      "sex" : "male",
    "name" : "Рубашка №2",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/2.jpg",
    "size": "M"
  },
  "Рубашка №3" : {
      "sex" : "male",
    "name" : "Рубашка №3",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/3.jpg",
    "brand": "M"
  },
"Рубашка №4" : {
    "sex" : "male",
    "name" : "Рубашка №4",
    "cost" : 1000,
    "country" : "argentina",
    "image" : "images/4.jpg",
     "brand": "M"
  },
"Платье №1" : {
    "sex" : "female",
    "name" : "Платье №1",
    "cost" : 1000,
    "country" : "brazil",
    "image" : "images/a.jpg",
     "brand": "L"
  },
"Платье №2" : {
    "sex" : "female",
    "name" : "Платье №2",
    "cost" : 1000,
    "country" : "brazil",
    "image" : "images/b.jpg",
     "brand": "L"
  },
"Платье №3" : {
    "sex" : "female",
    "name" : "Платье №3",
    "cost" : 1000,
    "country" : "brazil",
    "image" : "images/e.jpg",
    "brand": "L"
  }
}

index.css:

.single-goods {
    width: 280px;
    height: 530px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    text-align: center;
}
.single-goods button {
    display: block;
    margin: 20px auto;
}

.add-to-cart{
  background-color: red;
  border: none;
  color: white;
  padding: 10px 32px;
  text-align: center;
  font-size: 20px;
  margin: 4px 2px;
  opacity: 1;
  transition: 0.3s;
}
.add-to-cart:hover{
    opacity: 0.6
}
#mini-cart{
  padding: 20px;
}
.shoping-cart-minicart{
 background-color: red;
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  font-size: 20px;
  margin: 4px 2px;
  opacity: 1;
  transition: 0.3s;
}

----------------------------------------------------------------------------------------------------------------

Второй код выполняет фильтрацию по трем фильтрам, товары там аналогичные (цена, название, картинка), но они хранятся в массиве.
Cсылка на код:
https://jsfiddle.net/h129478t/



Мне нужно объединить эти два кода, добавив такую фильтрацию к первому кода (так он больше), но чтобы товары хранились в отдельном JSON файле. Помогите пожалуйста объединить эти два кода.

[laimas]

"Рубашка №1" : {
"sex" : "male",
"name" : "Рубашка №1"

Либо ключом доложен быть уникальный идентификатор товара, либо вообще удалить их и использовать массив объектов.

чтобы объекты хранились в json файле а не массиве

А где у вас массив в котором товары?

[nathan111777]

массив в котором товары в втором коде ссылку я написал на песочницу.
В том и проблема что в первом коде обьекты хранятся в json файле а в втором коде обьекты хранятся в массиве.
А нужно чтобы хранились обьекты в JSON

[laimas]

А что тут первое, а что второе? У вас товары хранятся в json, здесь получают их $.getJSON('goods.json', ... О каком массиве речь?

[laimas]

Под вторым имеется ввиду код корзины?

[laimas]

Я вам же предлагал как хранить товары, не плоско, а деревом. То есть должно быть типа:

var gods = {
    "man" : {
        "1" : {
            "name" : "Рубашка №1",
            "price" : 1000,
            "country" : "argentina",
            "image" : "images/1.jpg",
            "brand": "M"
        },
        "2" : {
            "name" : "Рубашка №2",
            "price" : 1000,
            "country" : "argentina",
            "image" : "images/2.jpg",
            "size": "M"
        },
        "3" : {
            "name" : "Рубашка №3",
            "price" : 1000,
            "country" : "argentina",
            "image" : "images/3.jpg",
            "brand": "M"
        },
        "4" : {
            "name" : "Рубашка №4",
            "price" : 1000,
            "country" : "argentina",
            "image" : "images/4.jpg",
            "brand": "M"
        }
    },
    "woman" : {
        "1" : {
            "name" : "Платье №1",
            "price" : 1000,
            "country" : "brazil",
            "image" : "images/a.jpg",
            "brand": "L"
        },
        "2" : {
            "name" : "Платье №2",
            "price" : 1000,
            "country" : "brazil",
            "image" : "images/b.jpg",
            "brand": "L"
        },
        "3" : {
            "name" : "Платье №3",
            "price" : 1000,
            "country" : "brazil",
            "image" : "images/e.jpg",
            "brand": "L"
        }
    }
};

Соответственно страницы имеют ключ либо man, либо woman (var sex). Это позволяет не перебирать весь объект при выводе, а получать из объекта только нужное для страницы. Это заменить, так как ничего проверять не надо:

for (var key in data) заменить на for (var key in data[sex]), а for if (data[key]['sex'] != sex) { continue; } удалить из кода.

Первичными ключами товаров служат идентификаторы. Они должны быть уникальны либо у всех товаров, если предполагается вывод всех товаров на одну страницу, либо в пределах каждого из ключей страниц (man и woman) если нет. Уникальность означает, что если к примеру удален товар с идентификатором 3, то этот идентификатор нельзя уже использовать для другого товара.

В корзину же нужно писать ключ страницы и идентификаторы выбранных товаров, то есть что-то:

{"man" : [2,4], "woman": [1,2]}.

Каждая из страниц всегда загружает объект товаров, следовательно всю другую информацию о товарах для корзины можно получить из объекта по ключам страниц и идентификаторам, которые записаны в корзине. Если есть отдельная страница для корзины, то в ней нужно также получать с сервера json с товарами.

У вас неудобная организация объекта (json), и как следствие есть лишнее и ненужное в коде.

[nathan111777]

Под вторым имеется код где товары фильтруется фильтрами:
https://jsfiddle.net/h129478t/
перейдите по ссылке и поймете о чем вообще речь

[laimas]

Под вторым имеется код где товары фильтруется фильтрами

А фильтрация где производится, наверное же на страницах так ведь? А значит зачем вообще нужен дубликат товаров в виде массива?

Можно сделать так (я пишу тезисы, если поймете, то напишите так, если нет, тогда конкретно код):

1) Функция loadGoods не нужна, и лучше ее заменить на вывод html кода товаров, для примера назовем ее showGoods. Она содержит только вывод товаров из определенного ранее объекта, назовем его goods.

var out = '';
for (var key in goods[sex]) { ....

2) Объект с товарами получается один раз при загрузке страницы (ocument.addEventListener('DOMContentLoaded' .....), для этого проверяется: если переменная goods не определена (можно проверять и определенную на пустоту), то делается запрос на сервер $.getJSON('goods.json' .... результат которого (объект) присваивается переменной goods, а далее управление передается функции showGoods и далее у вас по списку.

Это позволит работать с объектом товаров любому сценарию на странице.

PS. Не известно какие сценарии и как будут исполняться, но если все просто, то можно всего лишь изменить это:

var cart = {};
document.addEventListener('DOMContentLoaded', function (e) {              
  loadGoods();
  checkCart();      
  showMiniCart();
});

на

var cart = {}, goods;
document.addEventListener('DOMContentLoaded', function () {              
    $.getJSON('goods.json', function (data) {
        goods = data;    
        showGoods(); //читайте выше
        checkCart();      
        showMiniCart();
    });
});

и далее везде работать с объектом goods.

[nathan111777]

дубликат товаров не нужен мне вообще не нужен массив, нужно просто код который фильтрует товары (по ссылке) поместить в eshop.js но я не знаю как это сделать, потому что в этих двух кодах разный подход к хранению объектов(в одном обьекти сохранятся в отдельном файле а в другом коде в том же js файле) вы хоть и пытаетесь мне помочь но совсем не поняли сути вопроса и задачи
Другими словами я когда-то сделал корзину товаров, а сейчас нашел код фильтров и хочу к своему сайту добавить фильтры чтоб фильтровать товары, но не могу потому что не знаю как.

[laimas]

var cart = {}, DATA;
document.addEventListener('DOMContentLoaded', function () {             
    $.getJSON('goods.json', function (data) {
        DATA = data; 
.....

Структуру своих данных приведите к тому что в том коде, то есть это массив объектов (выкинуть ключи "Рубашка №1" : и т.п.). Забирайте от туда код без массива.