$(function() {
$.getJSON('test.json', function(data) {
for (var i = 0; i < data.products.length; i++) {
var obj = data.products[i];
if (obj.title.toLowerCase().includes("t-shirt")) {
var Imgs = '<div class="Tops"><img src="' + obj.imUrl + '"></div>'
$(Imgs).appendTo($(".TopsImages"));
}
var bought_together_id = obj.related["bought_together"];
if (obj.asin in bought_together_id) {
if (obj.title.toLowerCase().includes("sandal")) {
var Imgs = '<div class="Shoes"><img src="' + obj.imUrl + '"></div>'
$(Imgs).appendTo($(".ShoesImages"));
}
}
}
})
})
- asin = ID
- imUrl is the image field where the image url is saved
To elucidate my JavaScript code, I am utilizing a loop to iterate through every product and its data from a JSON file. My objective is to analyze each product individually.
I have succeeded in reading the title field of the product and then checking if it contains "t-shirt", "hat", "pants/jeans" or "shoes". Subsequently, displaying the 'imUrl' value of the product in the appropriate div class such as TopsImages, PantsImages, ShoesImages, or HatsImages.
The challenging part arises when attempting to scrutinize the 'bought_together' field values of the same product one at a time, which are three different IDs of three distinct products. The goal is to identify the data for the IDs, examining if the title field of that product includes "t-shirt", "hat", "pants/jean" or "shoes", and exhibit the 'imUrl' value accordingly in the relevant div class like TopsImages, PantsImages, ShoesImages, or HatsImages.
This process repeats for the other two bought_together product IDs until a complete outfit is formed. Moreover, there will be arrows pointing left and right, enabling the user to navigate between products by clicking on them.
In summary, after retrieving the 'bought_together' list of IDs from the product data, I encounter difficulties in pinpointing the product that corresponds to the ID within the JSON file sequentially.
The snippet of my code where I am trying to achieve this is: obj.asin in bought_together_id, however, it solely verifies the first product's ID instead of evaluating the entire JSON file.
var bought_together_id = obj.related["bought_together"];
if (obj.asin in bought_together_id) {
if (obj.title.toLowerCase().includes("sandal")) {
var Imgs = '<div class="Shoes"><img src="' + obj.imUrl + '"></div>'
$(Imgs).appendTo($(".ShoesImages"));
}
}
Here is an excerpt of my JSON file showcasing the structure I am working with. It consists of about ten similar snippets representing ten unique products.
{
"products": [{
"asin": "B0001MQ60A",
"title": "KEEN Men's Newport H2 Sandal",
"imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg",
"related": {
"also_bought": ["B000MN8OR6"],
...
}]
}
Additionally, here is the HTML markup connected to the rest of the code, featuring four empty divs allocated for different types of clothing:
<article class="column large-2">
<div class="HatsImages">
</div>
<div class="TopsImages">
</div>
<div class="PantsImages">
</div>
<div class="ShoesImages">
</div>
</article>