How to get JSON data from the url(Rest API) to UI

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>

标签： javascript rest jquery

4条回答

家丑人穷心不美

2楼-- · 2019-03-15 23:21

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.

0人赞添加讨论(0) 举报

时光不老，我们不散

3楼-- · 2019-03-15 23:30

 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人赞添加讨论(0) 举报

甜甜的少女心

4楼-- · 2019-03-15 23:38

You can use native JS so you don't have to rely on external libraries.

(I will use some ES2015 syntax, a.k.a 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

0人赞添加讨论(0) 举报

兄弟一词,经得起流年.

5楼-- · 2019-03-15 23:45

You can use us jquery function getJson :

$(function(){
    $.getJSON('/api/rest/abc', function(data) {
        console.log(data);
    });
});

0人赞添加讨论(0) 举报

How to get JSON data from the url(Rest API) to UI

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间