CODEWITHSUNDEEP
javascriptjqueryhtmlslice
RedGiant
RedGiant

Reputation: 4748

Starting at a specific index in each function

Please take a look at this fiddle

How can I use slice in the loop to make it return results starting from a specific index?

The JSON file:

[
  {
    "title": "A",
    "link": "google.com",
    "image": "image.com",
    "price": "$1295.00",
    "brand": "ABC",
    "color": "Black",
    "material": "Rubber"
  }
]

I want it to return results starting from brand:

brand - ABC

color - Black

material - Rubber

I don't know where to put .slice(4) in the loop. I got undefined error using
$.each(value.slice(4),function(key, value)

Here's the code:

JS:

   $.ajax({
        url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
        success: function (data) {
            var item_html="";
            $(data.query.results.json).each(function(key, value) {
              $.each(value,function(key, value){                             
               item_html += '<h3>'+key+' - '+value+'</h3>';                        
              });
            });            

           $('#area').append(item_html);

        }
    });

Upvotes: 0

Views: 162

Answers (2)

Barmar
Barmar

Reputation: 781887

Use a separate array of property names, so you can slice it and get the names in a guaranteed order.

var props = [
    "title",
    "link",
    "image",
    "price",
    "brand",
    "color",
    "material"
    ];

$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
    dataType: 'json',
    success: function (data) {
        var item_html="";
        var propslice = props.slice(4);
        $.each(data.query.results.json, function(i, obj) {
            $.each(propslice, function(i, key) {
                value = obj[key];
                item_html += '<h3>'+key+' - '+value+'</h3>';
            });
        });
        $('#area').append(item_html);
    }
});

If there are a small number of properties you want to skip, you can make a list of them in an object, and test against that list:

var excluded_props = {
    title: true,
    link: true,
    image: true,
    price: true
};

$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%20%3D%22http%3A%2F%2Fgoo.gl%2FaZgYDB%22&format=json&diagnostics=true&callback=",
    dataType: 'json',
    success: function (data) {
        var item_html="";
        $.each(data.query.results.json, function(i, obj) {
            $.each(obj, function(key, value) {
                if (!excluded_props[key]) {
                    value = obj[key];
                    item_html += '<h3>'+key+' - '+value+'</h3>';
                }
            });
        });
        $('#area').append(item_html);
    }
});

Upvotes: 2

John C
John C

Reputation: 666

What you're asking for isn't possible with an object. Objects in Javascript are not ordered, only arrays. You have a few options:

  • Refactor your object to be an array
  • Refactor your object so that each key has a new key for order*
  • loop through each property of the object, placing it into an array (no guaranteed order!) and then looping through the array.

*Example:

[
  {
    "title": {
        "value" : "A",
        "order" : 4
    },
    "link": {
        "value" : "google.com",
        "order" : 5
    ...
  }
]

Upvotes: 1

Related Questions