Loop through the json file in the correct order
I am trying to iterate over a json file to generate the previous and next page.
So what I mean:
<a href="Link to next page">Next</a>
<a href="Link to previous page">Previous</a>
Instead of href, you need to find a product link. This link is in the JSON file.
{
"collection": {
"9409555": {
"id": 9409555,
"url": "lola-dress-9409555.html"
},
"9806609": {
"id": 9806609,
"url": "kimono-dress.html",
}, //and 20 product more...
I am struggling to achieve this. How to determine which "postulation" in the loop I am on, and how to determine what the next or previous value is.
Script
$.getJSON('link-to-json-file/?format=json', function(data){
$.each(data.products, function(key, product){
console.log(key, product);
});
});
I know I can iterate over a json object as described above. Can someone give me some guidance on what a good approach would be. Any help is more than welcome!
source to share
According to your JSON structure, you can do this:
$.getJSON('link-to-json-file/?format=json', function(data){
var pos = 0;
for(var key in data.collection){
console.log(pos);
console.log(key);
console.log(data.collection[key].id);
console.log(data.collection[key].url);
pos++;
});
});
If your JSON has an array structure, you can use $ .each
{
"collection": [
{
"id": 9409555,
"url": "lola-dress-9409555.html"
},
{
"id": 9806609,
"url": "kimono-dress.html",
}
]
}
$.getJSON('link-to-json-file/?format=json', function(data){
$.each(data.callection, function(index, product){
console.log(index); //this is the position 0, 1, 2 ...
console.log(product);
});
});
source to share
This seems really hacky, but the only way I can do it is to loop through the object as you do it and find the index of the product property (like "9806609": {
) in raw responseText
.
This strongly suggests that it is being formed the way you placed it, and responseText
that there was no other text that could match. You can make it a little safer by removing new lines and spaces before and after colons, etc.
// will store the final products
var products = [];
$.getJSON('link-to-json-file/?format=json', {}, function (data, textStatus, jqXhr) {
// loop through object, adding the ID, product and position of "pid": in the jqXhr.responseText
var sortProducts = [];
$.each(data.collection, function(key, product){
sortProducts.push({
pid: key,
product: product,
pos: jqXhr.responseText.indexOf('"'+key+'":')
});
});
// now sort the products by their position and store in the final array
products = sortProducts.sort(function(a,b) {
return a.pos - b.pos;
});
});
You can find the index using a simple array search:
function findProductIndex(pid) {
var prodIndex = -1;
for(var i = 0; i < products.length; i++) {
if(products[i].pid == pid) {
return i;
}
}
}
var idx = findProductIndex('9806609');
Of course, if order is important to you, creating collection
as an array is the way to go and you'll get your sorted array straight away:
"collection": [
{
"id": 9409555,
"url": "lola-dress-9409555.html"
},
{
"id": 9806609,
"url": "kimono-dress.html",
}
]
source to share