CODEWITHSUNDEEP
jqueryhtmlajaxangularjsapi
DaMexicanJustice
DaMexicanJustice

Reputation: 3

JSONP get user data from http://jsonplaceholder.typicode.com/users using javascript in a html document

I have a question regarding JSONP api in relation to the dummy data available on the URL http://jsonplaceholder.typicode.com/users. Basicallly I wish to fetch the data using javascript in a html document and display the results in a unordered list tag.

I have this setup:

<

!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html data-ng-app="">
    <head>
        <title>Using AngularJS Directives and Data Binding</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="JavaScript" type="text/javascript" src="jquery-1.11.2.js"></script>
    </head>
    <body>
        <script src="angular.min.js"></script>

        <script>
            $.ajax('http://jsonplaceholder.typicode.com/users', {
                method: 'GET'
            }).then(function(data) {
                console.log(data);
                document.getElementById('container').innerHTML += "<ul><li>" + data + "</li></ul>";
            });
        </script>

        <div id="container"></div>
        <!--
        <div class="container">
            Name: <input type="text" data-ng-model="name" /> {{ name }}
        </div> -->

    </body>
</html>

By inspecting my website locally we get the following result:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

in a single bulletin point.

I'm using jQuery and angularJS. I can tell I'm fetching some data, but I cannot figure out how to manipulate the data into it's subsection as can be seen at the url: http://jsonplaceholder.typicode.com/users/.

Can someone shine some light on what I'm missing here? Attempting the data.id or data.name etc. will return undefined.

Bear in mind that I'm a beginner and have only just started working with APIs and JSONP. I'm sure the answer is relatively simple, but give it to me straight and pedagogically.

Thank you.

Upvotes: 0

Views: 5168

Answers (4)

InkInspector
InkInspector

Reputation: 19

I made some changes to your HTML. A for loop will populate an unordered list with the data, for each user.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html data-ng-app="">
    <head>
        <title>Using AngularJS Directives and Data Binding</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script language="JavaScript" type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    </head>
    <body>
        <script src="angular.min.js"></script>

        <script>
            $.ajax('http://jsonplaceholder.typicode.com/users', {
                method: 'GET'
            }).then(function(data) {
                console.log(data);

                let response = '';
                for (let i = 0; i < data.length; i++) {
                    response +=
                    `<ul>
                        <li>${data[i].name}</li>
                        <li>${data[i].email}</li>
                        <li>${data[i].address.city}</li>
                        <li>${data[i].address.street}</li>
                        <li>${data[i].address.suite}</li>
                        <li>${data[i].address.zipcode}</li>
                        <li>${data[i].address.geo.lat}</li>
                        <li>${data[i].address.geo.lng}</li>
                        <li>${data[i].phone}</li>
                        <li>${data[i].website}</li>
                        <li>${data[i].company.name}</li>
                        <li>${data[i].company.catchPhrase}</li>
                        <li>${data[i].company.bs}</li>
                    </ul>`
                }
                document.getElementById('container').innerHTML = response;
            });
        </script>

        <div id="container"></div>
        <!--
        <div class="container">
            Name: <input type="text" data-ng-model="name" /> {{ name }}
        </div> -->

    </body>
</html>

Today you don't need to use jQuery to fetch data using a GET method. Just use the Fetch API. Below is an example of how to fetch data using browsers' native capabilities.

function fetchUsers() {

fetch('https://jsonplaceholder.typicode.com/users')
    .then((res) => { return res.json() })
    .then((data) => {
        let response = '';
        for (let i = 0; i < data.length; i++) {
            response +=
        `<ul>
            <li>${data[i].name}</li>
            <li>${data[i].email}</li>
            <li>${data[i].address.city}</li>
            <li>${data[i].address.street}</li>
            <li>${data[i].address.suite}</li>
            <li>${data[i].address.zipcode}</li>
            <li>${data[i].address.geo.lat}</li>
            <li>${data[i].address.geo.lng}</li>
            <li>${data[i].phone}</li>
            <li>${data[i].website}</li>
            <li>${data[i].company.name}</li>
            <li>${data[i].company.catchPhrase}</li>
            <li>${data[i].company.bs}</li>
        </ul>`;
            }

            document.getElementById('container').innerHTML = response;
        })
}

document.addEventListener('DOMContentLoaded', function() { // This event listener will trigger the function when the DOM is ready
    fetchUsers();
})

Functional example: https://codepen.io/th91vi/pen/KKVwZwm

You may want to read some documentation about the Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Upvotes: 0

Murtaza
Murtaza

Reputation: 9

use JSON.stringify(data) it will convert the Javascript object into JSON string

Upvotes: -1

dprobhat
dprobhat

Reputation: 152

You said you are using AngularJS but doing nothing with angularJS in your code snippet. Here is the AngularJS implementation for accessing [http://jsonplaceholder.typicode.com/][1] users data.

Give a close look how street,suite and city are being accessed.

<html>
<head>
  <title>JSON API</title>
  <script type="text/javascript" src = "angular.min.js"></script>
  <style>
     table, th , td {
        border: 1px solid grey;
        border-collapse: collapse;
        padding: 5px;
     }

     table tr:nth-child(odd) {
        background-color: #f2f2f2;
     }

     table tr:nth-child(even) {
        background-color: #ffffff;
     }
  </style>

</head>
<body>
  <h2>My App</h2>
  <div ng-app = "" ng-controller = "userController">

     <table>
        <tr>
           <th rowspan="2">ID</th>
           <th rowspan="2">Name</th>
           <th rowspan="2">User Name</th>
           <th rowspan="2">Email</th>
           <th colspan="3">Address



           </th>              
        </tr>

        <tr>
          <th>Street</th>
           <th>Suite</th>
           <th>City</th>
        </tr>

        <tr ng-repeat = "user in users">
           <td>{{ user.id }}</td>
           <td>{{ user.name }}</td>
           <td>{{ user.username }}</td>
           <td>{{ user.email }}</td>
           <td>{{ user.address.street }}</td>
           <td>{{ user.address.suite }}</td>
           <td>{{ user.address.city }}</td>

        </tr>
     </table>
  </div>

  <script>
     function userController($scope,$http) {
        var url = "http://jsonplaceholder.typicode.com/users";

        $http.get(url).success( function(response) {
           $scope.users = response;
        });
     }
  </script>



</body>
</html>

Upvotes: 2

Mike Timmerman
Mike Timmerman

Reputation: 131

var len = data.length;
for (var i = 0; i < len; i++) { 
    console.log(data[i].id);
}

Upvotes: 0

Related Questions