GOPAL YADAV GOPAL YADAV - 5 months ago 21
jQuery Question

Unable to load data from local json file using jQuery

<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/JavaScript">
$select = $('#people');
//request the JSON data and parse into the select element
$.ajax({
type:'GET',
url: 'simple.json',
dataType:'JSON',
success:function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$.each(data.person, function(key, val){
$select.append('<option >' + val.firstName+ '</option>');
})
},
error:function(){
//if there is an error append a 'none available' option
$select.html('<option >none available</option>');
}
});
</script>
</head>

<body>
<select id="people"></select>
</body>

</html>


The data from local json file cannot be read using jQuery ajax.

Even I am trying the same code using
$.getjson()
. The output is not being returned.

This is my plunker: https://plnkr.co/edit/Ys2xxOn1oUCeNL3wqcvJ?p=preview

Answer

change data.person to data.employees, wrap the code in a document ready statement

https://plnkr.co/edit/PemDjZFAsFCcH16NfdQu?p=preview