json couldn't change the dataWithLabels

Question

Please can you help see the code. I would like to change the title name from 'Jason' to the temperature written in the JSON file.

var dataWithLabels = [
{
   "title":"Jason",  
}];

 $.ajax({
    url: "http://api.wunderground.com/api/2b38dcff93aa3dff/conditions/q/CA/Santa_Clara.json",
    type: "GET",
    dataType: "json", 
    success: function(data) {
    for(var i=0;i<1/*dataWithLabels.length*/;i++){
       var statistic = data.current_observation;
       dataWithLabels[i]['title']= statistic.temp_c;}} 
       //wanted to change Jason to the temperature written at the JSON file.Please help.
    });

 alert(dataWithLabels[0]['title']);

http://codepen.io/wtang2/pen/bEGQKP

It's NOT a duplicate, I am trying to replace the result from JSON file to title of dataWithLabels object

Move the `alert` into the `success` callback. You are accessing `dataWithLabels` **before** it was changed. — Felix Kling, Dec 07 '15 at 21:33
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Felix Kling, Dec 07 '15 at 21:33
no I need to fix the title inside datawithlabels. It does not solve — user21, Dec 07 '15 at 21:34
http://codepen.io/anon/pen/BjyRNp?editors=001 shows that your code works as expected if you put the `alert` inside the `success` callback. So the issue is that you are accessing the `dataWithLabels` *at the wrong time*. `$.get` is **asynchronous**, which is what the duplicate question is all about. If you don't know what that means, read the other question. — Felix Kling, Dec 07 '15 at 21:46
Thank you @FelixKling for your explanation. I can understand better now. — user21, Dec 08 '15 at 01:50

Guido Kitzing · Accepted Answer · 2015-12-07T21:48:14.220

1

Since I don't know, if your JSON you are requesting is correct, I just assume it is. Still, if you like to see, what is happening in dataWithLabels after your Ajax-Request, you need to rewrite the function a little:

   var dataWithLabels = [{
    "title": "Jason",
  }];

  $.ajax({
    url:     "http://api.wunderground.com/api/2b38dcff93aa3dff/conditions/q/CA/Santa_Clara.json",
    type: "GET",
    dataType: "json",
    success: function(data) {
        for (var i = 0; i < 1 /*dataWithLabels.length*/ ; i++) {
          var statistic = data.current_observation;
          dataWithLabels[i]['title'] = statistic.temp_c;
          alert(dataWithLabels[i]['title']);
        }

      }
      //wanted to change Jason to the temperature written at the JSON  file.Please help.
  });

Now, the status of dataWithLabels is alerted AFTER you insert the statistic.temp_c. Your code always alerts the state BEFORE the Ajax-request.

Hope that helps!

edited Dec 07 '15 at 21:48

answered Dec 07 '15 at 21:46

Guido Kitzing

892
5
14

What did you change and why? – Felix Kling Dec 07 '15 at 21:47
I put your ``alert`` inside the for-loop. Because that is where you assign a new value to your array. The point of Ajax is to call the success-function after the request has been successfully done. The alert in your original code would have been executed before the success function. - asynchronously- – Guido Kitzing Dec 07 '15 at 21:49
It's not my code, but thanks for the clarification. So essentially you agree that this is a duplicate of the linked question in the comments above? – Felix Kling Dec 07 '15 at 21:50
Ah, sorry. Yes, it is a duplicate. – Guido Kitzing Dec 07 '15 at 21:51

score 1 · Answer 2 · answered Dec 07 '15 at 21:53

This is because AJAX request works asynchronously so you need to alert the result only after the AJAX request is completed for that you can do

var dataWithLabels = [{
   "title": "Jason",
}];

$.ajax({
  url: "http://api.wunderground.com/api/2b38dcff93aa3dff/conditions/q/CA/Santa_Clara.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
      for (var i = 0; i < 1 /*dataWithLabels.length*/ ; i++) {
         var statistic = data.current_observation;
         dataWithLabels[i]['title'] = statistic.temp_c;
         alert(dataWithLabels[i]['title']); // Alert only after data is received
      }

  }

});

json couldn't change the dataWithLabels

2 Answers2