jquery – JavaScript API not correctly display corresponding JSON Data
I’m trying to display the JSON data with an if/else based on a dropdown selection to show the corresponding data with each name chosen.
JSON DATA: jsonplaceholder.typicode.com/users
Example of what I am trying to achieve
// this is the dropdown list
// input Ids Username, Email, Cont_No, Street, Suite, City, Zipcode, Latitude, Longitude
document.addEventListener(‘DOMContentLoaded’, () => {
const selectName = document.getElementById(‘dropuser’);
fetch('https://jsonplaceholder.typicode.com/users')
.then(res => res.json())
.then(data => {
data.forEach(data => {
selectName.options[selectName.options.length] = new Option(data.name, data.name);
displayUserInfo(data);
console.log(data);
})
})
.catch(err => console.log(err));
function displayUserInfo(data){
var disUser = selectName.options[selectName.options.length] ;
if(disUser == data.name){
document.getElementById('Username').value = data.name;
}else{
}
document.getElementById('Email').value = data.email;
document.getElementById('Cont_No').value = data.phone;
document.getElementById('Street').value = data.address.street;
document.getElementById('Suite').value = data.address.suite;
document.getElementById('City').value = data.address.city;
document.getElementById('Zipcode').value = data.address.zipcode;
document.getElementById('Latitude').value = data.address.geo.lat;
document.getElementById('Longitude').value = data.address.geo.lat;
}
});
Read more here: Source link