Use values from JSON response as variables on webpage. Ajax API call

Question

I am making a ajax call my my API which returns some JSON. I would like like to use certain values from the JSON to dynamically update my webpage.

<div class="Name"></div>
<div class="Role"></div>
<div class="Location"></div>
<div class="Team"></div>

I know I have my response data here success: function(data) but I am unsure on how to call the values I want and then put them into variables I can use on my page.

For example on my page <div class="Name"></div> should show john smithin plain html.

HTML With Ajax Call

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>1</title>
  <style>
  img {
    height: 100px;
    float: left;
  }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>


<div class="Name"></div>
<div class="Role"></div>
<div class="Location"></div>
<div class="Team"></div>

<script>
var authorizationToken = "xxxxxxxxxxxxxxxxxxx";
function myapiRequest(endpoint, method, options) {
    $.ajax($.extend({}, {
    type: 'GET',
    dataType: "json",
    success: function(data) { // my successfully reutnred json
},
    url: "https://api.myapi.com/" + endpoint,
    headers: {
      "Authorization": "Token token=" + authorizationToken,
      "Accept": "application/vnd.myapi+json;version=2"
    }
  },
  options));
}
myapiRequest('/users/12345G?include%5B%5D=contact_methods&include%5B%5D=teams'); // this will be a variable 
</script>
</body>
</html>

Response

{  
   "user":{  
      "name":"john smith",
      "email":"[email protected]",
      "time_zone":"Asia/Hong Kong",
      "color":"crimson",
      "billed":true,
      "role":"user",
      "description":null,
      "invitation_sent":false,
      "contact_methods":[  
         {  
            "id":"55666655",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"[email protected]",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"55554555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"[email protected]",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"5455555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"[email protected]",
            "send_short_email":false,
            "send_html_email":true
         },
         {  
            "id":"5444555",
            "type":"email_contact_method",
            "summary":"Work",
            "html_url":null,
            "label":"Work",
            "address":"[email protected]",
            "send_short_email":false,
            "send_html_email":true
         }
      ],
      "teams":[  
         {  
            "id":"232656TM",
            "name":"team1",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         },
         {  
            "id":"25656TM",
            "name":"team1",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         },
         {  
            "id":"P767676TM",
            "name":"team1tt",
            "description":null,
            "type":"team",
            "summary":"team1 support",
            "privilege":null
         }
      ],
   }
}

Why does your response have ** around it? That's not valid JSON. — Barmar
– Barmar, Commented Aug 31, 2017 at 22:54
So data(response) represents the entire object. As you can see, the only key available in the object is "user". To access that, you can do data.user. That will return the object that is the value of user. If you just wanted the user name, you could do data.user.name. If you wanted something from a single contact method, you would need to loop like this $(data.user.contact_methods).each(function(){}); and in that add logic to filter out the unwanted results. Make sure the object returned isn't in JSON string format, other wise you need to call JSON.parse() on whatever is stringified. — Aaron Eveleth
– Aaron Eveleth, Commented Aug 31, 2017 at 22:58

Chris · Accepted Answer · 2017-08-31 22:56:50Z

1

I am not sure which specific fields you want to use for location and team but this is the idea ..

success: function(data) {
    $('.Name').html(data.user.name);
    $('.Role').html(data.user.role);
},

You can add the extra two lines to map your JSON response to .Location and .Team

answered Aug 31, 2017 at 22:56

Chris

4,75813 gold badges56 silver badges98 bronze badges

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

4 Comments

Luke Toss Over a year ago

How would I call something more complex, say from my response, after 'Teams' - "id":"25656TM",? Thanks

Chris Over a year ago

Something like data.teams[0].id

Luke Toss Over a year ago

Sorry Chris, $('.teams').html(data.teams[0].id ); doesn't return anything. should return 232656TM from my example above should it not?

Chris Over a year ago

Actually, looking at the JSON it should be data.user.teams[0].id

Mobi · Accepted Answer · 2017-08-31 22:56:51Z

0

you can get the element by classname

var userName = document.getElementsByClassName("Name");

then

userName [0].innerHTML = data.user.name;

and put this code inside you success callback function.

answered Aug 31, 2017 at 22:56

Mobi

464 bronze badges

Comments

jonahe · Accepted Answer · 2017-08-31 23:13:54Z

0

Step by step:

1) Give your interesting parts of the HTML unique identifiers like

<div id="name"></div>

2) Get a reference to the HTML element you want to modify. With jQuery you can easily get a hold of individual elements in your HTML like so

const $nameElement = $('#name'); // # is for id

The "#" part is called a selector. There are tonnes of different selectors that are useful in different circumstances.

3) Manipulate the element. In your case, give it some inner HTML value.

$nameElement.html(data.user.name);

There are a lot of different convenience methods for different types of manipulation as well.

edited Aug 31, 2017 at 23:13

answered Aug 31, 2017 at 23:00

jonahe

5,0101 gold badge17 silver badges20 bronze badges

Collectives™ on Stack Overflow

Use values from JSON response as variables on webpage. Ajax API call

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related