How to display a json data from a existing url using ajax call

Question

I Am new in working with json and jquery. I am trying to study the basics of json and jquery by working on some example. So I use existing json data in http://api.androidhive.info/contacts for my example. I want to display this data in my HTML page. My code is:

<html>
<head>
<title>jQuery Ajax Example with JSON Response</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
 
<script>
$(document).ready(function(){
  $(':submit').on('click', function() { // This event fires when a button is clicked
      alert("submitt worked.");
      $.ajax({ // ajax call starts
      url: 'http://api.androidhive.info/contacts/', // JQuery loads serverside.php
      type: "GET",
      dataType: 'json', // Choosing a JSON datatype
      success: function (msg) {
                alert("ajax worked.");
                JsonpCallback(msg);
             
    },
    })
    function JsonpCallback(json)
{
  for (var i in json.contacts) {
          $('#wines').append('contacts: ' + json.contacts[i] + '<br/>');
        }

}
    
    return false; // keeps the page from not refreshing 
  });
});
</script>
 
</head>
 
<body>
  <form method="post" action="">
    <button value="all" type="submit">Get!</button>
   
  </form>
    
  <div id="wines">
  <!-- Javascript will print data in here when we have finished the page -->
  </div>
 
</body>
</html>

can any one please give me some brief introduction to JSON and how it's working ?

Thanks in advance.

does this help http://stackoverflow.com/questions/1078118/how-do-i-iterate-over-a-json-structure ? — Dhiraj, Jun 05 '15 at 05:13
FYI, you probably will not be able to execute such request as it is cross-domain. — Yeldar Kurmangaliyev, Jun 05 '15 at 05:20
so if i want to take data from another url i want to use JSONP isn't it ? — Ashith, Jun 05 '15 at 05:32

score 0 · Answer 1 · answered Jun 05 '15 at 05:34

You are iterating the JSON wrong, in your case since you are using jQuery (as mentioned) you can use the $.each(json, callback); helper fron jQuery, you can see the documentation here Jquery $.each documentation

For an example implementation I've created this JSFIDDLE LINK for you. Have a great day ahead. Don't forget that JSON means

Javascript Object Notation

It's an object.

$.each(jsonData.contacts, function(k, v)
{
      console.log(v.name);
      $('#name').append('<li>'+v.name+'</li>');
});

score 0 · Answer 2 · edited May 23 '17 at 11:58

jQuery

Am try to study the basics of json and jquery

Is a Javascript library with lots of very usefull methods. If you want to create a dynamic website it is very recommended to look into jQuery. There are many site with great explanation on what jQuery can do. As far as your example is concerned: There is an issue when passing variables/data from one framework to another or even when simply storing data. Here comes JSON.

JSON

Or JavaScript Object Notation (JSON) is used to solve exactly that problem. What is basically does is take all the desired data (array, variable, object, string etc.) and writes it in a human readable and for other frameworks readable fashion. I use JSON to store data in files when no database is available or when passing data from one framework to another (like JS <-> PHP).

Your example code

What happens here:

$(':submit').on('click', function() { // This event fires when a button is clicked
      alert("submitt worked."); // not yet
      $.ajax({ // ajax call starts
          url: 'http://api.androidhive.info/contacts/', // JQuery loads serverside.php --> this I don't know
          type: "GET", // communication type
          dataType: 'json', // Choosing a JSON datatype
          success: function (msg) { // here, the whole content of the url is read, idealy it is in JSON format ofc
                alert("ajax worked."); // hoorray
                JsonpCallback(msg);
          },
    })

There is the serverside.php file that receives a GET command and returns HTML. All the HTML content is in JSON type (so no <stuff>, i.e. no actual HTML) and your success function returns that content in the msg variable. Typically you use something like

var obj = JSON.parse(text);

to convert the JSON data to Javascript variables. Read this here JSON in Javascript

JSONP

Now what if you want to do some domain crossing (as you suggested), then I strongly recommend to read this here What is JSONP all about? . It explains what JSONP is all about

i understand my fault the url [link](http://api.androidhive.info/contacts/) does note have json it only a text data isn't it ? — Ashith, Jun 05 '15 at 06:03
JSON data IS *only text data* thats why I wrote *human readable*. If you have troubles with the code not working, please point out where it fails. — rst, Jun 05 '15 at 06:04
when i examine the url: 'http://api.androidhive.info/contacts/ it is data some text inside body tags so can json be in that form? — Ashith, Jun 05 '15 at 06:16
The link you posted does not have any HTML tags, at least on my browser. JSON does NOT require HTML tags. To see if there are some errors, do not only write a `success` function but also an `error` function, read this link here http://stackoverflow.com/questions/377644/jquery-ajax-error-handling-show-custom-exception-messages — rst, Jun 05 '15 at 07:26

How to display a json data from a existing url using ajax call

2 Answers2