I have the following pseudo structure.

[
   {"product":
      {
        "id":"14",
        "product_title":"My Awesome Product!",
        "product_desc":"An awesome product.."
      }
   }, 
   {"product":
      {
        "id":"15",
        "product_title":"My MORE Awesome Product!",
        "product_desc":"An AWESOMER product..."
      }
   }
]

I am iterating it like this:

$.post('Ajax.php',function(res){
  res = res.pop();
  $.each(res,function(product){
    alert(product.product_title);
  });
});

However, only the last product_title is being shown. It does not go thru all of them. Is it my code, or my JSON structure? Thanks!

EDIT: reason for the .pop();: Reading jQuery JSON Structure - cant get it to work

I have the following pseudo structure.

[
   {"product":
      {
        "id":"14",
        "product_title":"My Awesome Product!",
        "product_desc":"An awesome product.."
      }
   }, 
   {"product":
      {
        "id":"15",
        "product_title":"My MORE Awesome Product!",
        "product_desc":"An AWESOMER product..."
      }
   }
]

I am iterating it like this:

$.post('Ajax.php',function(res){
  res = res.pop();
  $.each(res,function(product){
    alert(product.product_title);
  });
});

However, only the last product_title is being shown. It does not go thru all of them. Is it my code, or my JSON structure? Thanks!

EDIT: reason for the .pop();: Reading jQuery JSON Structure - cant get it to work

• javascript
• jquery
• json

Share Improve this question Follow edited May 23, 2017 at 12:29 CommunityBot 111 silver badge asked Nov 16, 2011 at 11:28 JeffJeff 12.2k1414 gold badges8585 silver badges155155 bronze badges 3

• 2 why the .pop()? it doesn't return the array but whatever is in the last index of the array and removes it from the array – Esailija Commented Nov 16, 2011 at 11:30
• @Esailija - see stackoverflow./questions/8149202/… - my previous question :) – Jeff Commented Nov 16, 2011 at 11:31
• Does that iterate through all the products? – Jeff Commented Nov 16, 2011 at 11:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

If you want to iterate just don't pop...

$.post('Ajax.php',function(res){

  $.each(res,function( index, value ){
   alert( value.product.product_title );
  });
});

Also, your JSON structure has some redundancy, it could be written as:

[
      {
        "id":"14",
        "product_title":"My Awesome Product!",
        "product_desc":"An awesome product.."
      },


      {
        "id":"15",
        "product_title":"My MORE Awesome Product!",
        "product_desc":"An AWESOMER product..."
      }
]

Which means an array of products. You always want your arrays to contain things of single type. If you wanted to return multiple things from the server, this would be more appropriate structure:

{  
    "products": [
      {
        "id":"14",
        "product_title":"My Awesome Product!",
        "product_desc":"An awesome product.."
      },


      {
        "id":"15",
        "product_title":"My MORE Awesome Product!",
        "product_desc":"An AWESOMER product..."
      }
    ],

    "kittens": [
      {
        "id":"14",
        "name":"kitty"
      },


      {
        "id":"15",
        "name": "kitty"
      }
    ]
}

An array of products and an array of kittens, never an array of products AND kittens.

Your res = res.pop(); line is setting res to be the last element of the res array. If you remove that line it should work as you expect.

$.post('Ajax.php', function(res) {
  for (var i = 0, j = res.length; i < j; i++) {
    console.log(res[i].product.product_title);
  }
});

Try this, it should show 2 product titles. JSON structure is fine.

My remendation is to use simple JavaScript iteration (for loop):

var temp = 
[
   {"product":
      {
        "id":"14",
        "product_title":"My Awesome Product!",
        "product_desc":"An awesome product.."
      }
   }, 
   {"product":
      {
        "id":"15",
        "product_title":"My MORE Awesome Product!",
        "product_desc":"An AWESOMER product..."
      }
   }
]
for(var i = 0; i < temp.length; i++)
{
    console.log(temp[i].product.id);
}