How can I get the JSON data from a file to show up on the HTML page
Question
I have a not so typical JSON here ( https://github.com/conde-nast-international/cnid-tech-tests/blob/master/data/article.json ) that I'm trying to display on a HTML page very simply inline, as normal looking text and a photos.
I'm embedding the JavaScript/jQuery in the HTML file but it doesn't seem to be working. Does anybody have some insight into what I'm doing wrong? Thank you in advance!
HTML (JavaScript):
<html>
<head>
<meta charset="utf-8">
<title>JSON Articles</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="article.json"></script>
</head>
<body>
<div id="output" style="width:100px; text-align:center;">
</div>
<script>
$.ajax({
url:"http://localhost:8888/json-article/article.json",
method:"GET",
success:function(data){
for(var object in objectJson){
$("#output").text("id="+object.id + "title"+object.title + "body"+object.body + "cover"+object.cover);
}
}
});
</script>
</body>
</html>
2 answers
solution1
1 2017-08-10 13:27:14
<script>
$.ajax({
url:"Your json url",
method:"GET",
success:function(data){
$("#output").text(data);
}
});
</script>
solution2
0 2017-08-10 13:31:45
You should import JQuery
<script>
$.ajax({
url:"Your json url",
method:"GET",
success:function(data){
var objectJson = JSON.parse(data)
$("#output").text("id="+objectJson.id+"title"+objectJson.title);
}
});
</script>
You should do that for each property of your content.
Edit:
<script>
$.ajax({
url:"Your json url",
method:"GET",
success:function(data){
var objectJson = JSON.parse(data)
For(var object in objectJson){
$("#output").text("id="+object.id+"title"+object.title);
}
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.