I want to create a html page in which there is an input. For eg I am entering an Input Mango, it alerts properties of the object. for eg. in case of mango -
color = 'Yello'
tasste = 'sweet'
price = 30
Can you please help me out doing this.
You can simply define the data json to a var and extract it's value whenever you user has entered any value in the input box by using the EventListener ....
You can try:
// Add more items as per your choice in it
data = {
"mango": {
"color": "Yello",
"tasste": "sweet",
"price": 30
},
"apple": {
"color": "Red",
"tasste": "sweet",
"price": 40
}
}
document.getElementById("input").addEventListener('input', function(evt) {
if (data[this.value]) {
document.getElementById("details").innerHTML = `Color : ${data[this.value]['color']}<br>
Taste : ${data[this.value]['tasste']}<br>
Price : ${data[this.value]['price']}`;
} else {
document.getElementById("details").innerHTML = "Invalid Input.<br>Please enter a valid value";
}
});<input type="text" id="input">
<div id="details"></div>