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

2019-03-15 23:23发布

问题:

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>

回答1:

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.



回答2:

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



回答3:

You can use us jquery function getJson :

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


回答4:

 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`
                    }
                }
            });