REST API - JSON data to HTML table using JQUERY

Question

I want to display data from an API to an HTML table through Jquery, but it is not showing the data into the table. I believe it is due to the JSON structure Here is the HTML file

        <thead>
            <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
            </tr>
        </thead>
        <tbody id="mydata">
            <tr>
                <td>[[E]]</td>
                <td>[[F]]</td>
                <td>[[G]]</td>
            </tr>           
        </tbody>
    </table>
    </div>

    <script>
        function UserAction() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             alert(this.responseText);
         }
    };
    xhttp.open("GET", "https:xxxxxxx", true);
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1Nixxxxxxx");
}
    $("#mydata").mirandajs(xhhtp);
    </script>

About the JSON response, I want to fetch the Player, timestamp and reason, and render the data into the table (in the example E,F,G) here is the API response

{
    "meta": {
        "active": 2,
        "expired": 275,
        "total": 277
    },
    "links": {
        "next": "https://api.xxxxxxx"
    },
    "data": [
        {
            "type": "xxx",
            "id": "xxxx",
            "meta": {
                "player": "Serbo"
            },
            "attributes": {
                "id": "xxxx",
                "uid": "xxxx",
                "timestamp": "2018-07-11T13:02:14.663Z",
                "reason": "xxxxxxx",
                "note": null,
                "identifiers": [
                    {
                        "id": xxxxxxx,
                        "type": "xxxxxxx",
                        "identifier": "xxxxxxx",
                        "private": true,
                        "lastSeen": "2018-08-17T16:23:24.865+00:00"
                    }
                ]

Please note that I need the data from inside the json object and then the data inside the attributes object

I tried using Ajax as this fiddle shows jsfiddle.net/pb1hxexL/6 but nothing :( — Leandro Gabrielli
– Leandro Gabrielli, Commented Nov 29, 2018 at 3:24

Leandro Gabrielli · Accepted Answer · 2018-11-29 04:34:29Z

1

Solved it, it was about the way I was calling the API

answered Nov 29, 2018 at 4:34

Leandro Gabrielli

3133 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

REST API - JSON data to HTML table using JQUERY

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related