How do I select other objects in an array that has the same object in javascript and json?-CodePudding

I'm trying to create a code structure where people will list products based on the options they choose, but I got stuck at one point.

I'm pulling the data from the json file but I'm trying to provide the condition as follows. I want to extract the titles, prices and other information from the arrays with the same etiket values and print them to the document.

my Json data:

[
{
    "id": 1,
    "title": "Zincir Tasarımlı El Çantası",
    "price": "49.90",
    "upPrice": "69.90",
    "currency": "&#8378;",
    "images": "./images/yeni.jpg",
    "etiket": {
        "cinsiyet": "kadin",
        "yas": "yas16-20",
        "konsept": "yilbasi"
    }
},
{
    "id": 2,
    "title": "Tüylü Kısa Kol Çanta",
    "price": "74.50",
    "upPrice": "99.90",
    "currency": "&#8378;",
    "images": "./images/yeni1.jpg",
    "etiket": {
        "cinsiyet": "kadin",
        "yas": "yas20-30",
        "konsept": "yilbasi"
    }
},
{
    "id": 3,
    "title": "Zincir Detaylı Kemer Tokalı Çanta",
    "price": "89.90",
    "upPrice": "99.90",
    "currency": "&#8378;",
    "images": "./images/yeni3.jpg",
    "etiket": {
        "cinsiyet": "erkek",
        "yas": "yas16-20",
        "konsept": "yilbasi"
    }
},
{
    "id": 4,
    "title": "Zincirli Uzun Kol Deri Çanta",
    "price": "69.90",
    "upPrice": "89.90",
    "currency": "&#8378;",
    "images": "./images/yeni4.jpg",
    "etiket": {
        "cinsiyet": "erkek",
        "yas": "yas20-30",
        "konsept": "yilbasi"
    }
},
{
    "id": 5,
    "title": "Zincir Tasarımlı El Çantası",
    "price": "49.90",
    "upPrice": "69.90",
    "currency": "&#8378;",
    "images": "./images/yeni5.jpg",
    "etiket": {
        "cinsiyet": "erkek",
        "yas": "yas30-40",
        "konsept": "yilbasi"
    }
},
{
    "id": 6,
    "title": "Zincirli Deri Desenli Çanta",
    "price": "109.90",
    "upPrice": "129.90",
    "currency": "&#8378;",
    "images": "./images/yeni6.jpg",
    "etiket": {
        "cinsiyet": "erkek",
        "yas": "yas45ustu",
        "konsept": "yilbasi"
    }
},
{
    "id": 7,
    "title": "Kısa Kollu Deri Çanta",
    "price": "199.90",
    "upPrice": "269.90",
    "currency": "&#8378;",
    "images": "./images/yeni7.jpg",
    "etiket": {
        "cinsiyet": "kadin",
        "yas": "yas30-45",
        "konsept": "yilbasi"
    }
},
{
    "id": 8,
    "title": "Kahverengi Deri Desenli Kısa Kol Çanta",
    "price": "349.90",
    "upPrice": "369.90",
    "currency": "&#8378;",
    "images": "./images/yeni8.jpg",
    "etiket": {
        "cinsiyet": "kadin",
        "yas": "yas45ustu",
        "konsept": "yilbasi"
    }
}]

I'm giving an example. I want to draw the titles of the same "yilbasi" values, "yas16-20" values and "kadin" values to the page with innerHTML.

But I don't know how to pull the data of the ones with the same values. I have not been able to create its structure. I want to do it with pure javascript if possible.

CodePudding user response：

Solution: I found the solution very quickly with @tromgy's guidance. I will try to mention it below for those who have the same problem.

Js kodlarım:


const productData = [
    {
        "id": 1,
        "title": "Zincir Tasarımlı El Çantası",
        "price": "49.90",
        "upPrice": "69.90",
        "currency": "&#8378;",
        "images": "./images/yeni.jpg",
        "etiket": {
            "cinsiyet": "kadin",
            "yas": "yas16-20",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 2,
        "title": "Tüylü Kısa Kol Çanta",
        "price": "74.50",
        "upPrice": "99.90",
        "currency": "&#8378;",
        "images": "./images/yeni1.jpg",
        "etiket": {
            "cinsiyet": "kadin",
            "yas": "yas16-20",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 3,
        "title": "Zincir Detaylı Kemer Tokalı Çanta",
        "price": "89.90",
        "upPrice": "99.90",
        "currency": "&#8378;",
        "images": "./images/yeni3.jpg",
        "etiket": {
            "cinsiyet": "erkek",
            "yas": "yas16-20",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 4,
        "title": "Zincirli Uzun Kol Deri Çanta",
        "price": "69.90",
        "upPrice": "89.90",
        "currency": "&#8378;",
        "images": "./images/yeni4.jpg",
        "etiket": {
            "cinsiyet": "erkek",
            "yas": "yas16-20",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 5,
        "title": "Zincir Tasarımlı El Çantası",
        "price": "49.90",
        "upPrice": "69.90",
        "currency": "&#8378;",
        "images": "./images/yeni5.jpg",
        "etiket": {
            "cinsiyet": "erkek",
            "yas": "yas45ustu",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 6,
        "title": "Zincirli Deri Desenli Çanta",
        "price": "109.90",
        "upPrice": "129.90",
        "currency": "&#8378;",
        "images": "./images/yeni6.jpg",
        "etiket": {
            "cinsiyet": "erkek",
            "yas": "yas45ustu",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 7,
        "title": "Kısa Kollu Deri Çanta",
        "price": "199.90",
        "upPrice": "269.90",
        "currency": "&#8378;",
        "images": "./images/yeni7.jpg",
        "etiket": {
            "cinsiyet": "kadin",
            "yas": "yas30-45",
            "konsept": "yilbasi"
        }
    },
    {
        "id": 8,
        "title": "Kahverengi Deri Desenli Kısa Kol Çanta",
        "price": "349.90",
        "upPrice": "369.90",
        "currency": "&#8378;",
        "images": "./images/yeni8.jpg",
        "etiket": {
            "cinsiyet": "kadin",
            "yas": "yas45ustu",
            "konsept": "yilbasi"
        }
    }
]
let demo = document.getElementById("demo");
const titles = productData.reduce((acc, prdct) =>
prdct.etiket.cinsiyet =="kadin"
&& prdct.etiket.yas =="yas16-20"
&& prdct.etiket.konsept=="yilbasi" ? acc   prdct.title   "</br>" : acc, "");

demo.innerHTML = titles;

<div id=demo></div>

This is how it turned out, as I wanted it to be.

CodePudding user response：

If I understand your question, you would iterate the array, and for each object retrieve the values you care about.

Because you said 'pure javascript', I'm going to use traditional loops instead of array methods like includes and find and forEach, but you could do it with either.

The niave approach in the loop would be to loop again, checking for duplicates.

for (let i = 0; i > array.length; i  ) {
    for (let j = 0; j < array.length; j  ) {
        if (i === j) {
            // skip when we are going to compare an element with itself
            continue;
        }
    
        if (
            array[i].etiket.cinsiyet === array[j].etiket.cinsiyet
            && array[i].etiket.yas === array[j].etiket.yas
            && array[i].etiket.konsept === array[j].etiket.konsept
        ) {
            // you have found two array elements that share 'etiket' values, they are the elements at 'i' and 'j'. do whatever you want.
        }
    }
}