Javascript multiple actions at once

Question

I have a function that I have create to display fruits and vegetables. The function is supposed to return several elements simultaneously, but I keep kitting a snag trying to return values. My code is:

Can anyone see the error in my function?

 function fetchDetails() { var x = document.getElementById("food").value; var str = "" for (var color of colors) { str += "<option>" + item + "</option>" }; var foodtype = { Apple || Orange || Banana: { foodname: 'Fruit', img: 'http://example.com/fruit.jpg', foodshort: "FRU", colors: ["Red", "Orange", "Green"] }, Eggplants || Cucumber || Spinach: { foodname: 'Vegetable', img: 'http://example.com/vegetable.jpg', foodshort: "VEG", colors: ["Green", "Purple", "Red"] }, }; var f = foodtype[x]; document.getElementById("foodname").innerHTML = f && f.foodname; document.getElementById("img").src = f && f.img; document.getElementById("foodshort").value = f && f.foodshort; document.getElementById("colors").innerHTML = str; }

 <input type="text" id="food" onkeyup="fetchDetails()"> <p id="foodname"></p> <img id="img"></img> <input type="text" id="foodshort"> <select id="colors"></select>

Thanks in advance!

Answer 1

To achieve expected result, use below mentioned JSON format and loop through the array and use the colors object and image to display

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

code sample - https://codepen.io/nagasai/pen/qxedOP

JS:

function fetchDetails() {
var x = document.getElementById("food").value;

var foodtype = [{
item:['Apple', 'Orange','Banana'], 
foodname: 'Fruit',
img: 'https://www.w3schools.com/w3css/img_lights.jpg',
foodshort: "FRU",
colors : ["Red", "Orange", "Green"]
},
 {
item:['Eggplants' , 'Cucumber' , 'Spinach'],
foodname: 'Vegetable',
img: 'https://www.w3schools.com/w3css/img_forest.jpg',
foodshort: "VEG",
colors : ["Green", "Purple", "Red"]
},
];

for(var i =0; i < foodtype.length; i++){
   if(foodtype[i].item.indexOf(x) != -1){
     var f = foodtype[i];
document.getElementById("foodname").innerHTML = f && f.foodname;
document.getElementById("img").src = f && f.img;
document.getElementById("foodshort").value = f && f.foodshort;
var str = ""
for (var color of f.colors) {
str += "<option>" + color + "</option>"
};
document.getElementById("colors").innerHTML = str;
   }
}

}

Answer 2

Well, if you can change your object to something like,

<html>

<body><input type="text" id="food" onkeyup="fetchDetails()" value="Apple">
<p id="foodname"></p>
<img id="img"></img>
<input type="text" id="foodshort">
<select id="colors"></select>

<script>
function fetchDetails() {
  var x = document.getElementById("food").value;
  var str = ""
  for (var color of colors) {
    str += "<option>" + item + "</option>";
  };

  var foodtype = {
  Apple : {
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Orange:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
     Banana:{
      foodname: 'Fruit',
      img: 'http://example.com/fruit.jpg',
      foodshort: "FRU",
      colors : ["Red", "Orange", "Green"]
    },
    Eggplants : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Cucumber : {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    },
    Spinach: {
      foodname: 'Vegetable',
      img: 'http://example.com/vegetable.jpg',
      foodshort: "VEG",
      colors : ["Green", "Purple", "Red"]
    }
  };

  f = foodtype[x];
  console.log(f);
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;
}
fetchDetails();
</script>


</body>
</html>

It should work then, or if you want to go with your approach, you can use this expand function

function expand(obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; ++i) {
        var key = keys[i],
            subkeys = key.split(/,\s?/),
            target = obj[key];
        delete obj[key];
        subkeys.forEach(function(key) { obj[key] = target; })
    }
    return obj;
}
  var foodtype = {
  'Apple, Orange, Banana' : {
  foodname: 'Fruit',
  img: 'http://example.com/fruit.jpg',
  foodshort: "FRU",
  colors : ["Red", "Orange", "Green"]
},

'Eggplants, Cucumber, Spinach' : {
  foodname: 'Vegetable',
  img: 'http://example.com/vegetable.jpg',
  foodshort: "VEG",
  colors : ["Green", "Purple", "Red"]
}

};

  var expanded = expand(foodtype);

  f = expanded[x];
  console.log(f);
  document.getElementById("foodname").innerHTML = f && f.foodname;
  document.getElementById("img").src = f && f.img;
  document.getElementById("foodshort").value = f && f.foodshort;
  document.getElementById("colors").innerHTML = str;

Javascript multiple actions at once

Question

2 answers

solution1
1 ACCPTED 2018-03-06 19:26:23

solution2
0 2018-03-06 18:08:24

Javascript multiple actions at once

Question

2 answers

solution1 1 ACCPTED 2018-03-06 19:26:23

solution2 0 2018-03-06 18:08:24

solution1
1 ACCPTED 2018-03-06 19:26:23

solution2
0 2018-03-06 18:08:24