getJSON and Angular Model

Question

I am stuck. Somehow I can't get this working. I try to load data for a web-app from a (still local) JSON-file. A section of this JSON contains colors and looks like this:

{
  "colors" : {
    "1" : "yellow",
    "2" : "green",
    "3" : "red"
  },
  "stuff : {...}
}

I have a very basic HTML file with some header stuff. Scipts are loaded in the header. The interesting part looks like this:

<ul  ng-controller="ColorController">
  <li ng-repeat="(key,value) in colors" value="{{key}}">
    {{key}}: {{value}}
  </li>
</ul>

The corresponding Javascript:

var colors = {
    "1": "lyellow",
    "2": "lgreen",
    "3": "lred"
};

var app = angular.module('test', []);

app.controller('ColorController', function($scope){

    $scope.colors = colors;

    $.getJSON('data.json')
        .then(function(res){
            $scope.colors = res.colors;
        });
})

I tried with a local version of colors first, therefore the variable colors. That worked well and produced the desired output. The I tried to switch to a local stored JSON. console.log showed a correct parsing. On a debug console, colors and res.colors looks the same. But the list on the page is not updated.

I'd guess it is something with timing, but I am not sure. Could somebody point me in the right direction?

Can you try .done in place of your .then ?

David R
– David R

2017-01-09 13:30:00 +00:00
Commented Jan 9, 2017 at 13:30 — David R
– David R, Commented Jan 9, 2017 at 13:30
use $http.get instead of jQuery ajax

Pankaj Parkar
– Pankaj Parkar

2017-01-09 13:32:44 +00:00
Commented Jan 9, 2017 at 13:32 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 9, 2017 at 13:32

Fissio · Accepted Answer · 2017-01-09 13:37:40Z

1

jQuery's getJSON is performed outside angular's digest cycle, and thus the view isn't updated in then then of your ajax call. If you were to add a line with $scope.$apply() after your $scope variable assignment, the view would update (see plunker: https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview)

What I recommend, though, is to use angular's native $http.get to get the JSON. See plunker here for example: https://plnkr.co/edit/F7e5ECYbl91mYhF3g848?p=preview

angular.module('test', [])
.controller('testCtrl', function($scope, $http) {
  $http.get('colors.json')
  .then(function(response) {
    $scope.colors = response.data['colors']
  })
})

answered Jan 9, 2017 at 13:37

Fissio

3,75818 silver badges31 bronze badges

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

3 Comments

David R Over a year ago

Would be apt to use .success in place of .then, coz personally I have faced some issues with .then

Fissio Over a year ago

.then was deprecated a few builds back (see stackoverflow.com/questions/35329384/…) - what kind of problems did you face with .then?

David R Over a year ago

Yes. When we try to access a local .json file using the $http function the content were not rendering although the call was success.

Oksid · Accepted Answer · 2017-01-09 13:42:24Z

0

Try using the $timeout.

.then(function(res){
  $timeout(function (res) {
    // your code
  }, 0);
})

it will force angular to update the $scope.

answered Jan 9, 2017 at 13:42

Oksid

801 silver badge3 bronze badges

Collectives™ on Stack Overflow

getJSON and Angular Model

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related