1

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.com/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>
Improve this question
2
  • 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. 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. Commented May 31, 2016 at 14:54

4 Answers 4

Reset to default
3

Not 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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks very much, but I need get the json what comes from the file : real-data.json I can't turn it in a variable because the json will be changing day by day.
instead of x use the response of $.getJSON
I tried use $.getJSON('real-data.json', function (data) { alert(data); }); but I got load of errors :(
what you see in alert?
1

showData.empty() should be showData.html(data)

Improve this answer

5 Comments

I did change but I still not getting
Which won't actually show the data in the object which is presumably not what the OP wants.
Sorry, showData.html(JSON.stringify(data)) would've been better.
thanks works perfect, now i am getting this error: XMLHttpRequest cannot load testapinow.com=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '0.0.0.0:8000'; is therefore not allowed access. The response had HTTP status code 400
You may want to use JSONP or something else. There are options for that discussed here.
1

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

Improve this answer

4 Comments

can you provide a jsfiddle? I could not make it work. thanks
Be sure to put the loop in the getJSON callback function: jsfiddle.net/tecfy4fL
thanks, i am getting this error: XMLHttpRequest cannot load testapinow.com=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '0.0.0.0:8000' is therefore not allowed access. The response had HTTP status code 400.
That error is beyond the scope of this question. See this SO post for possible CORS solutions: stackoverflow.com/questions/3595515/…
1 

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="get-data">Get JSON data</a>
<div id="show-data"></div>

Improve this answer

4 Comments

thanks, but the problem I need get these values from a json file so I can't convert ir in a js var.
just change the var for your real json file
I tried this but did not work :( : $.getJSON('real-data.json', function (data) { alert(data); }); $('#get-data').on('click', function() { $('#show-data').html(JSON.stringify(json)); });
data is your variable json, try var json; $.getJSON('real-data.json', function (data) { json = data; }); $('#get-data').on('click', function() { $('#show-data').html(JSON.stringify(json)); });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.