How to fetch json array from json api using ajax

Question

I'm new in this field. I have an API with multiple arrays. I want to use ajax to get all the object of any of the array in html format by just typing the array name in my html input.

{
"players": [
    {
        "name": "Marcos Alonso",
        "position": "Left-Back",
    },
    {
        "name": "Marco van Ginkel",
        "position": "Central Midfield",
    }
articles": [
    {
        "author": "Stephen Walter",
        "url": "http://www.telegraph.co.uk/news/2017/04/15/disruptive-stag-party-revellers-thrown-plane-manchester-airport/",
    },
    {
        "author": "TMG",
        "url": "http://www.telegraph.co.uk/news/2017/04/15/north-korea-marks-anniversary-military-parade-pyongyang-pictures/",
    }],

...........
......
}

My index.php looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link  href="clientcss.css" rel="stylesheet" type="text/css"><!-- css styling connection -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type=text/javascript >
            $(document).ready(function () {
                $('#getstuff').click(function () {
                    var requestdata = $('#choi').val();
                    var result = $('resultdiv');

                    $.ajax({
                        url: 'http://localhost/v1/api/webapi',
                        method: post,
                        data: {search: requestdata},
                        dataType: 'json',
                        success: function (data) {
                            result.html('array: ' + data.search);
                        }
                    })
                });
            });
        </script>
        <title>clientside</title>
    </head>
    <body>
            <div id="clnt">
                <h3>Testing testing</h3>
                <table>
                    <input type="text"  id="choi" name="chi" placeholder="type something" size="30" required>                                
                </table>
                <button type="button"  id="getstuff" value="GetSearch">GettheData</button>
                <br/><br/>
                <div id="resultdiv">

                </div>
            </div>
    </body>
</html>

Kindly help me with the ajax / jQuery to fetch all the objects of a array by typing or parsing the array name.

I want to just type e.g 'players' and get all the objects of the players array in the 'resuldiv' without refreshing the browser.

Thanks for your help.

Have a look at [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) — Felix Kling, Apr 28 '17 at 16:34
I think your ajax call should be inside and not because you want to have the page be rendered already before you start to access the DOM. — victor, Apr 28 '17 at 16:35
@victor `$(document).ready()` runs the code after the DOM has been loaded. — Barmar, Apr 28 '17 at 17:03
There's no `search` property in your data, what is `data.search` supposed to return? — Barmar, Apr 28 '17 at 17:04
Searching for the property that you send as a parameter should be done by the API code on the server, not in the Javascript. — Barmar, Apr 28 '17 at 17:05

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

If the API returns the entire JSON object, you shouldn't be passing requestdata to the server, you should use it to extract the property from the response.

$.ajax({
    url: 'http://localhost/v1/api/webapi',
    method: 'post',
    dataType: 'json',
    success: function (data) {
        var html = '<ul>';
        var array = data[requestdata];
        if (array) {
            $.each(array, function(key, value) {
                html += '<li>' + key + ': ' + value + '</li>';
            });
            result.html(html);
        }
    }
});

See Dynamically access object property using variable

edited May 23 '17 at 12:02

Community

1
1

answered Apr 28 '17 at 17:13

Barmar

741,623
53
500
612

Thanks for your contributions. In your ajax code, I want to ask what 'data' in success function was surposed to contain? What is in the 'data'? Because when I used the code, then run the appl. nothing happened. I typed e.g players and press the button but nothing happened. – Addey Apr 29 '17 at 08:09
`data` is the JSON data returned by the API. – Barmar Apr 29 '17 at 08:16
It should be the object you showed at the top of your question. – Barmar Apr 29 '17 at 08:16
I modified the code a bit and now it's working. if (array) { $.each(array, function (i) { $.each(array[i], function (key, value) { html += '
' + key + ': ' + value + '

Addey

May 01 '17 at 12:51

That won't just show the data that matches the search criteria. It will show both `players` and `articles` even if they just asked for `players`. – Barmar May 01 '17 at 15:19

How to fetch json array from json api using ajax

1 Answers1