How to get JSON data from the URL (REST API) to UI using jQuery or plain JavaScript?
Question
I have a URL " http://localhost:8888/api/rest/abc " which will give following json data. I wants to get this data in my UI using Jquery or java script. I'm trying this from couple of hours but I'm unable to resolve it. Please Suggest me few solutions which will help me to resolve 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 have tried Getjson which is not working out for me this is my code below Please correct me if the code is wrong.
<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>
4 answers
solution1
14 ACCPTED 2013-04-11 09:38:28
Send a ajax request to your server like this in your js and get your result in success function.
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,
});
at server side send response as json type.
And you can use jQuery.getJSON for your application.
solution2
10 2017-04-07 13:20:14
You can use native JS so you don't have 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 capture 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 don't have to specify headers, but you can do all that if you want. For further reference: Fetch API reference
solution3
6 2013-04-11 09:38:05
You can use us jquery function getJson :
$(function(){
$.getJSON('/api/rest/abc', function(data) {
console.log(data);
});
});
solution4
3 2018-12-14 09:20:38
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`
}
}
});
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.