How to use a for loop to loop through array values?

Question

I am trying to loop through array value in JavaScript using a for loop. The for loop also outputs the values onto the page.

I have done this successfully, but there seems to be an error as nothing is being put onto the page, but there are no console errors when I check.

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; var i; for (i = 0; i < cars.length; i++) { document.getElementById("demo").innerHTML = cars[i]["type"]; }

 <p id="demo"></p>

Answer 1

The problem that you are having is you don't have an array you have an object.

There are many ways to loop through objects, here I'm using for in .

Since I'm not sure why you are randomly setting strings to arrays, I added a join just in case.

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; for(car in cars){ document.getElementById("demo").innerHTML += cars[car].type.join("") + "<br>"; }

 <p id="demo"></p>

Answer 2

cars is an object, so cars.length will be undefined, thats why your for loop never will run.

If you want to keep the object and the numbers as name you could use the Object Keys

Object.keys(cars).map(object => {
 console.log(object.type)
})

If you can edit the values just define cars as array and keep your loop

var cars = [{
    make: ["Mazda"],
    type: ["6 Saloon"],
    colour: ["Red"],
    topspeed: ["131mph"],
    oto60: ["10.0s"],
    price: ["£18,282"],
    condition: ["Good"],
    year: ["2018"]
  }]

Answer 3

you need a Array For Loop

var cars = [
  {
    make: ["Mazda"],
    type: ["6 Saloon"],
    colour: ["Red"],
    topspeed: ["131mph"],
    oto60: ["10.0s"],
    price: ["£18,282"],
    condition: ["Good"],
    year: ["2018"],
  }
];

Answer 4

As @imvain2 has indicated, you have an object, not an array. An alternative to the for in loop is the for of loop as shown below.

for (var car of Object.values(cars)) {
  document.getElementById("demo").innerHTML += car.type + "</br>";
}

DEMO

 var cars = { 0: { make: ["Mazda"], type: ["6 Saloon"], colour: ["Red"], topspeed: ["131mph"], oto60: ["10.0s"], price: ["&#163;18,282"], condition: ["Good"], year: ["2018"] }, 1: { make: ["Ford"], type: ["Mondeo Sedan"], colour: ["Beige"], topspeed: ["116mph"], oto60: ["11.0s"], price: ["&#163;22,900"], condition: ["Clean"], year: ["2016"] }, 2: { make: ["Kia"], type: ["Rio"], colour: ["White"], topspeed: ["106mph"], oto60: ["12.6s"], price: ["&#163;3,900"], condition: ["Average"], year: ["2004"] }, 3: { make: ["Audi"], type: ["A4"], colour: ["Black"], topspeed: ["149mph"], oto60: ["7.6s"], price: ["&#163;15,300"], condition: ["Excellent"], year: ["2015"] }, 4: { make: ["Mercedes Benz"], type: ["C Class"], colour: ["Red"], topspeed: ["148mph"], oto60: ["6.7s"], price: ["&#163;15,462"], condition: ["Good"], year: ["2016"] }, 5: { make: ["BMW"], type: ["1 Series"], colour: ["Grey"], topspeed: ["124mph"], oto60: ["10.3s"], price: ["&#163;12,293"], condition: ["Clean"], year: ["2015"] } }; for (var car of Object.values(cars)) { document.getElementById("demo").innerHTML += car.type + "</br>"; }

 <p id="demo"></p>