Geek Answers Handbook

How to get JSON data from a URL (Rest API) in a user interface using jquery or java script

I have a url " http://localhost:8888/api/rest/abc " that will give the following json data. I want to get this data in my user interface using jQuery or java script. I have been trying this since two o'clock, but I can’t solve it. Suggest me some solutions that will help me solve this problem.

 { "My-user": [ { "link": [ { "href": "http://localhost:8888/api/rest/abc/MI/CH", "rel": "self", "type": "application/my.My.My-user+xml", "title": "rln" }, { "href": "http://localhost:8888/api/rest/cabin?MI=mi&CH=ch", "rel": "some relation", "type": "application/my.My.My-cabin+xml", "title": "rln1" } ], "My-user-list": [ { "name": "cuba", "Explanation": "bark" } ], "CH": "ch", "MI": "mi", "password": "xyz", }, { "link": [ { "href": "http://localhost:8888/api/rest/abc/DD/KN", "rel": "self", "type": "application/my.My.My-user+xml", "title": "rln" }, { "href": "http://localhost:8888/api/rest/cabin?DD=dd&KN=kn", "rel": "some relation", "type": "application/my.My.My-cabin+xml", "title": "rln1" } ], "My-user-list": [ { "name": "Cuba1", "Explanation": "bark1" } ], "KN": "kn", "DD": "dd", "password": "xyz1", } ] }

I tried Getjson, which does not work for me, this is my code below. Please correct me if the code is incorrect.

 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $.getJSON('/api/rest/abc', function(data) { console.log(data); }); </script> </head> <body> </body> </html>
+9
source share
4 answers

Send an ajax request to your server, as it is in js, and get the result in a successful operation.

 jQuery.ajax({ url: "/rest/abc", type: "GET", contentType: 'application/json; charset=utf-8', success: function(resultData) { //here is your json. // process it }, error : function(jqXHR, textStatus, errorThrown) { }, timeout: 120000, });

on the server side send the response as json type.

And you can use jQuery.getJSON for your application.

+12
source

You can use native JS, so you do not need to rely on external libraries.

(I will use some ES2015 syntax, aka ES6, modern javascript) What is ES2015?

 fetch('/api/rest/abc') .then(response => response.json()) .then(data => { // Do what you want with your data });

You can also fix errors, if any:

 fetch('/api/rest/abc') .then(response => response.json()) .then(data => { // Do what you want with your data }) .catch(err => { console.error('An error ocurred', err); });

By default, it uses GET and you do not need to specify headers, but you can do all this if you want. For future reference: get a link to the API

+6
source

You can use the jquery getJson function:

 $(function(){ $.getJSON('/api/rest/abc', function(data) { console.log(data); }); });
+5
source 
  jquery.ajax({ url: '//your api url' type: "GET", dataType: "json", success: function(data) { jQuery.each(data, function(index, value) { console.log(data); 'All you API data is here' } } });
0
source

More articles:


All Articles