Javascript SHIFT and POP on Associative Array

Using a regular array I am able to grab the image src from an array using shift() and pop(); I would like to do the same thing using an associative array to add a name and id.

Single Array

var products = ['product1.jpg'];
$('#products').append('<img src="' + products.shift() + '">');

Associative Array

开发者_开发问答var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
$('#products').append('<img id="' + products.shift() + '" name="' + products.shift() + '" src="' + products.shift() + '">');

You're using a regular array full of objects, so shift and pop will work, but return you the object.

var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
var prod = products.shift();
$('#products').append('<img id="' + prod.id + '" name="' + prod.name + '" src="' + prod.image + '">');

This line: var products = [{id:'1',name:'product 1',image:'product1.jpg'}]; declares an array with a single value inside. The single value is an object with the properties id, name, and image. When you call shift on the array, the value returned will be this object.

var products = [{id:'1',name:'product 1',image:'product1.jpg'}];

for(var i =0; i < products.length; i++){
  var product = products[i];
  $('#products').append('<img id="' + product.id + '" name="' + product.name + '" src="' + product.image + '">');
}

shift() is going to pull the whole object out of the index, not piece by piece like in your example.

You would need to access the object by name to get what you want.

var products = [{id:'1',name:'product 1',image:'product1.jpg'}, {id:'2',name:'product 2',image:'product2.jpg'}];

var currentProduct = products.shift();
$('#products').append('<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">');

to loop through it

while(products.length>0){
    var currentProduct = products.shift();
    $('#products').append('<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">');
}

better performance loop would be one write to the DOM

var strOut = "";
while(products.length>0){
    var currentProduct = products.shift();
    strOut  += '<img id="' +  currentProduct.id + '" name="' + currentProduct.name + '" src="' + currentProduct.image + '">';
}
$('#products').append( strOut );

1. You can cache the shift, and use the object's properties:

   var products = [{id:'1',name:'product 1',image:'product1.jpg'}];
   var product  = products.shift();
   $('#products').append('<img id="' + product.id 
                        + '" name="' + product.name 
                        + '" src="'  + product.image + '">');
   

2. You can store the values differently, as a multi-dimensional array:

   var products = [['1','product 1','product1.jpg']];
   var product  = products.shift();
   $('#products').append('<img id="' + product.shift()
                        + '" name="' + product.shift() 
                        + '" src="'  + product.shift() + '">');