CODEWITHSUNDEEP
javascriptjson
Stefan
Stefan

Reputation: 9

Parsing JSON file in JavaScript object - undefined value

I have problem with parsing my JSON files to JavaScript object.

The result of this code in select tag are 3 "undefined" options. Any help?

const webtask = `{
  "luxvehicles": [
    {
      "brand": "Audi",
      "Model": "A6",
      "Year": 2015,
      "FuelType": "diesel",
      "NumOfSeats": 5,
      "Picture": "no",
      "PricePerDay": 50,
      "Count": 5
    },
    {
      "brand": "Mercedes",
      "Model": "S class",
      "Year": 2017,
      "FuelType": "diesel",
      "NumOfSeats": 5,
      "Picture": "no",
      "PricePerDay": 70,
      "Count": 3
    },
    {
      "brand": "BMW",
      "Model": "Series 7",
      "Year": 2020,
      "FuelType": "diesel",
      "NumOfSeats": 5,
      "Picture": "no",
      "PricePerDay": 100,
      "Count": 1
    }
  ]
}`;


let v = document.getElementById("vehicletype");
let x = document.getElementById("selectvozilo");
let vozila = JSON.parse(webtask);

if (v.value == "LUX") {

  for (i = 0; i < vehicles.luxvehicles.length; i++) {
    var opt = document.createElement('option');
    opt.value = vozila.luxvehicles.forEach(element => element.brand + " " + element.Model + " " + element.Year +
      " " + element.FuelType + " " + element.NumOfSeats + " " + element.PricePerDay + " Available cars: " + element.Count);

    opt.innerHTML = vozila.luxvehicles.forEach(element => element.brand + " " + element.Model + " " + element.Year +
      " " + element.FuelType + " " + element.NumOfSeats + " " + element.PricePerDay + " Available cars: " + element.Count);

    x.appendChild(opt);
  }
}
<input type="text" id="vehicletype" value="LUX" />
<select id="selectvozilo"></select>

Upvotes: -1

Views: 59

Answers (2)

mplungjan
mplungjan

Reputation: 177841

Try this. You mix vehicles and vozila

I would personally not have such a long VALUE in my select, but here you are

const webtask = `{ "luxvehicles": [ { "brand": "Audi", "Model": "A6", "Year": 2015, "FuelType": "diesel", "NumOfSeats": 5, "Picture": "no", "PricePerDay": 50, "Count": 5 }, { "brand": "Mercedes", "Model": "S class", "Year": 2017, "FuelType": "diesel", "NumOfSeats": 5, "Picture": "no", "PricePerDay": 70, "Count": 3 }, { "brand": "BMW", "Model": "Series 7", "Year": 2020, "FuelType": "diesel", "NumOfSeats": 5, "Picture": "no", "PricePerDay": 100, "Count": 1 } ] }`;


let v = document.getElementById("vehicletype");
let x = document.getElementById("selectvozilo");
let vehicles = JSON.parse(webtask);

if (v.value == "LUX") {
  x.innerHTML = vehicles.luxvehicles.map(element => {
    val = `${element.brand} ${element.Model} ${element.Year} ${element.FuelType} ${element.NumOfSeats} ${element.PricePerDay} Available cars: ${element.Count}`
    return `<option value="${val}">${val}</option>`;
  }).join("")
}
<input type="text" id="vehicletype" value="LUX" />
<select id="selectvozilo"></select>

Upvotes: 1

Met Br
Met Br

Reputation: 649

There is no definition of vehicles as I can tell.

So instead

vehicles.luxvehicles

use

webtask.luxvehicles

or define let vehicles of for loop

Upvotes: 1

Related Questions