I am getting these values from my json in my console: Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}
But how can I print this on my html? I tried doing jquery but I could not get. As well will be simple for me get these values from a url?
jquery:
$(document).ready(function () {
$('#get-data').click(function () {
var showData = $('#show-data');
$.getJSON('real-data.json', function (data) {
console.log(data);
alert(data);
showData.empty();
});
showData.text('Loading the JSON file.');
});
});
json:
{
"test": 0,
"howmuch": 0,
"day": 22,
"calls": [
]
}
html:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.9.1" src=".0.0-rc1/jquery.min.js"></script>
<script src="real-data.js"></script>
<style>body{ background: #F9F9FA; }</style>
</head>
<body>
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>
</body>
</html>
I am getting these values from my json in my console: Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}
But how can I print this on my html? I tried doing jquery but I could not get. As well will be simple for me get these values from a url?
jquery:
$(document).ready(function () {
$('#get-data').click(function () {
var showData = $('#show-data');
$.getJSON('real-data.json', function (data) {
console.log(data);
alert(data);
showData.empty();
});
showData.text('Loading the JSON file.');
});
});
json:
{
"test": 0,
"howmuch": 0,
"day": 22,
"calls": [
]
}
html:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.9.1" src="https://cdnjs.cloudflare./ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script src="real-data.js"></script>
<style>body{ background: #F9F9FA; }</style>
</head>
<body>
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>
</body>
</html>
- Well, how do you want to display it? You'd need to write it into the content of some element in your HTML (presumably the #show-data div) displaying which ever fields you want. – Matt Burland Commented May 31, 2016 at 14:40
-
You don't have a json string, you have a javascript object. If you want to get the string back again you'd need to use
JSON.stringify. But presumably you'd prefer to format it to look better than that. But you need to decide how you want it to appear and then append html elements to achieve that. – Matt Burland Commented May 31, 2016 at 14:54
4 Answers
Reset to default 3Not sure if you are looking for something like this.
Not able to use $.getJSON so assuming var x has the required value.
var x ={
"test": 0,
"howmuch": 0,
"day": 22,
"calls": [
]
}
$(document).ready(function () {
$('#get-data').click(function () {
var _jsonString = "";
for(var key in x){
_jsonString +="key "+key+" value "+x[key]+ '</br>';
}
$("#show-data").append(_jsonString)
});
});
Jsfiddle
showData.empty() should be showData.html(data)
You will need an iterator to display your json object data in html. In jQuery you can use $.each or in plain javascript you can use a for-in loop.
$.each(data, function(i, val){
$('div').append(val.test);
});
Or:
for (var i in data) {
$('div').append(data[i].test);
$('div').append(data[i].howmuch);
$('div').append(data[i].day);
}
See this post for more examples: jquery loop on Json data using $.each
var json = {
"test": 0,
"howmuch": 0,
"day": 22,
"calls": [
]
};
$('#get-data').on('click', function() {
$('#show-data').html(JSON.stringify(json));
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>