Why does document.getElementById return only one item in an array of multiple items?

user_12456621 0
Viewed 105

I am trying to write a function that returns all the item in the variant color array in the product array of objects; into the the "demo" ID. However the only thing that gets returned when I use document.getElementById() is the color "black".

product = [{
    variants: [{
      adjusted_price: "86000.00",
      color: "red",
      id: 421,
      quantity: 20,
    }]
  },
  {
    brandName: "Femithz",
    prodKeywords: "null",
    variants: [{
        adjusted_price: "54000.00",
        color: "red",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "50000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      },
      {
        adjusted_price: "54000.00",
        color: "black",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "40000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      }
    ]
  }
]

var variant = 0;

for (var i = 0; i < product.length; i++) {
  var variant = product[i].variants[i].color
  var variantPrice = product[i].variants[i].price
  var emptyArr = [];
  emptyArr.push(variant)
  // console.log(emptyArr)
  //  document.write(emptyArr)
  // function checkColor(color) {
  //     return color === "green";
  //   }
  document.getElementById("demo").innerHTML = emptyArr;
  console.log(emptyArr)
}
<p id="demo"></p>

arrays javascript
3 Answers

Reason being that you empty [] in the inside the loop. Hence it getting emptied again and one last item is shown when the loop finishes.

You can get more info about arrays here

product = [{
    variants: [{
      adjusted_price: "86000.00",
      color: "red",
      id: 421,
      quantity: 20,
    }]
  },
  {
    brandName: "Femithz",
    prodKeywords: "null",
    variants: [{
        adjusted_price: "54000.00",
        color: "red",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "50000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      },
      {
        adjusted_price: "54000.00",
        color: "black",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "40000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      }
    ]
  }
]

//Set to 0
var variant = 0;

//Add empty here not in the loop
var emptyArr = [];

for (var i = 0; i < product.length; i++) {
  var variant = product[i].variants[i].color
  var variantPrice = product[i].variants[i].price
  emptyArr.push(variant)
}
console.log(emptyArr)
document.getElementById("data").innerHTML = emptyArr;
<div id="data"></div>

user_136690480

Each time you loop through the items you are creating an empty array, pushing a single value in, logging it, and setting the demo element to it's value. So it gets set to red, then to black. If you subsequently fetch it it will still be black.

You'd need to declare the array outside of the loop and append the value at the end if you wanted it to have them all.

e.g.

product = [
    {
variants: [{
adjusted_price: "86000.00",
color: "red",
id: 421,
quantity: 20,
}] 
},
 {
brandName: "Femithz",
prodKeywords: "null",
variants: [{
adjusted_price: "54000.00",
color: "red",
converted_price: "145.60",
created_at: "2020-05-15T10:16:22.000000Z",
id: 421,
material: "Black",
pivot: {product_id: 81, variant_id: 421},
price: "50000.00",
quantity: 20,
size: "women-s",
updated_at: "2020-05-15T10:16:22.000000Z",
variant_sku: "SKU-5ebe71dbc7b4f"
},
{
    adjusted_price: "54000.00",
    color: "black",
    converted_price: "145.60",
    created_at: "2020-05-15T10:16:22.000000Z",
    id: 421,
    material: "Black",
    pivot: {product_id: 81, variant_id: 421},
    price: "40000.00",
    quantity: 20,
    size: "women-s",
    updated_at: "2020-05-15T10:16:22.000000Z",
    variant_sku: "SKU-5ebe71dbc7b4f"
    }
] 
}
]

var variant = 0;
var emptyArr = [];

for(var i =0; i < product.length; i++){
    var variant = product[i].variants[i].color
    var variantPrice = product[i].variants[i].price
    emptyArr.push(variant)
    // console.log(emptyArr)
    //  document.write(emptyArr)
    // function checkColor(color) {
    //     return color === "green";
    //   }
}
    console.log(emptyArr)
    document.getElementById("demo").innerHTML = emptyArr;
<p id="demo"></p>

user_31784260

There are 2 problems in your code

  • You declare emptyArr inside the loop. So that it will get the last variant color.
  • The variant is also a list, so you need to 2 loops to get all the colors in the variants.

product = [{
    variants: [{
      adjusted_price: "86000.00",
      color: "red",
      id: 421,
      quantity: 20,
    }]
  },
  {
    brandName: "Femithz",
    prodKeywords: "null",
    variants: [{
        adjusted_price: "54000.00",
        color: "red",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "50000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      },
      {
        adjusted_price: "54000.00",
        color: "black",
        converted_price: "145.60",
        created_at: "2020-05-15T10:16:22.000000Z",
        id: 421,
        material: "Black",
        pivot: {
          product_id: 81,
          variant_id: 421
        },
        price: "40000.00",
        quantity: 20,
        size: "women-s",
        updated_at: "2020-05-15T10:16:22.000000Z",
        variant_sku: "SKU-5ebe71dbc7b4f"
      }
    ]
  }
]

var variant = 0;
var emptyArr = [];
for (var i = 0; i < product.length; i++) {
    if(product[i].variants.length > 0){
        for(var j = 0; j < product[i].variants.length; j++ ){
            var variant = product[i].variants[j].color
            var variantPrice = product[i].variants[j].price
            emptyArr.push(variant)
        }
    }
    
  // console.log(emptyArr)
  //  document.write(emptyArr)
  // function checkColor(color) {
  //     return color === "green";
  //   }
}
document.getElementById("demo").innerHTML = emptyArr;
console.log(emptyArr)
<p id="demo"></p>

user_9644400
Related