Parsing JSON file in JavaScript object - undefined value

Question

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>

try if (webtask === undefined) { instead of if (webtask==null) { — Mister Jojo
– Mister Jojo, Commented Feb 27, 2021 at 18:50
@naveen it could become a bad habit of codding, in other cases the tested variable can have a value returning false, while it does exist fine and well — Mister Jojo
– Mister Jojo, Commented Feb 27, 2021 at 18:58
Please visit help center, take tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output, preferably in a Stacksnippet — mplungjan
– mplungjan, Commented Feb 27, 2021 at 19:00

mplungjan · Accepted Answer · 2021-02-27 19:13:03Z

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>

Met Br · Accepted Answer · 2021-02-27 18:56:30Z

1

There is no definition of vehicles as I can tell.

So instead

vehicles.luxvehicles

use

webtask.luxvehicles

or define let vehicles of for loop

edited Feb 27, 2021 at 18:56

answered Feb 27, 2021 at 18:50

Met Br

6495 silver badges9 bronze badges

2 Comments

codeandcloud Over a year ago

webTask is localStorage which returns DOMString. So it must be parsed.

Met Br Over a year ago

for(i=0; i<vehicles.luxvehicles.length;i++) Used vehicles here not webtask as a for loop element

Collectives™ on Stack Overflow

Parsing JSON file in JavaScript object - undefined value

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related