Load data from .json file into factory in Angular

Question

I have a factory which loads datas from array, or a selected element from this array. But if I move it to an external .json file, I just get errors - i am newbie to angular in all but trying hard, keep in mind ^^ So if I use the simple

$http.get('ports.json').success (function(data){
  var works = data;
});

code, I get "ReferenceError: works is not defined". And if I try the

$http.get('ports.json').then((portRes){
    var works = res.data;
});

I get the "Uncaught SyntaxError: Unexpected token {" error. But that code in not a factory, on a whole different page works, so no idea what can be wrong now :/ Here is the .json filet, and @ the link, you can check the plunker. Plunker - http://plnkr.co/edit/tMrJMjzc4pl7fQ1PIEiO?p=info

[
  {
    "Title": "Sprite",
    "subTitle": "",
    "Link": "sprite",
    "Thumbnail": "img/portfolio02.png",
    "Image": "img/ismont.png"
  },
  {
    "Title": "Pepsi",
    "subTitle": "Kristályvíz",
    "Link": "pepsi",
    "Thumbnail": "img/portfolio03.png",
    "Image": "img/sanofimont.png"
  }
]

EDIT: So I tried all what u wrote till now but nothing seemd to work... So I have thiw well-working factor now, which I want to transfer to an external .json file, to be very very clear for understand.

  portApp.factory("workFactory", function($http) {  
  var works = [
  {
      Title: "Sprite",
      subTitle: "",
      Link: "sprite",
      Thumbnail: "img/portfolio02.png",
      Image: "img/ismont.png"
  },
  {
      Title: "Pepsi",
      subTitle: "Kristályvíz",
      Link: "pepsi",
      Thumbnail: "img/portfolio03.png",
      Image: "img/sanofimont.png"
  }
  ];
  return {
      list: function() {
          return works;
      },
      selected: function(detPath) {
          selected = works.filter(function(work) {
              return work.Link == detPath;
          });
          return selected;
      }
  };

Since I cannot get it to work, no matte what I try from outer sites, still looking for a good Solution to get .json content into array inside a factory ^^ — CreativeZoller, Apr 13 '15 at 12:19

Amir Popovich · Answer 1 · 2015-04-13T09:08:10.830

You have lot's of problems with the Plunker you posted.

But the main problem was with this code:

portApp.factory("workFactory", function($http) {
        $http.get('ports.json').then((portRes) {
            var works = res.data;
        });
        return {
            list: function() {
                return works;
            },
            selected: function(detPath) {
                selected = works.filter(function(work) {
                    return work.Link == detPath;
                });
                return selected;
            }
        };
    });

Problems:
1. the then method expects a function. Change (portRes) to function(portRes).

2. Doing var works = res.data creates a local var inside the callback function. You can't access it outside. Plus change res to portRes.

3. Returning the works var wont work technically since it's a local var that isn't in the same scope. It wont work logically since the $http.get is an async process and you have no idea when it will finish.

Edit:
After you edited, I believe you need something like this(I didn't check this so there may be some errors but that's the way to do things):

portApp.factory("workFactory", function($http) {      
    var state = {
          works: null,

          list: function() {
              return this.works;
          },

          selected: function(detPath) {
              return this.works.filter(function(work) {
                  return work.Link == detPath;
              });
          }
    };

    $http.get('myJson.json').success(function(data) {
        state.works = data;
    }); 

    return state;
}

Thanks :) Now I think there is some json parsing error, because despite of what online json validators say, my json seems to be not legit :/ "SyntaxError: Unexpected token at Object.parse (native)" — CreativeZoller, Apr 13 '15 at 09:19
Ok, updated the plunker itself and tried to investigate the scope what it gets back... I get a bigger object, which has subobjects, containing the wanted content. But.. how to access them? :s Sorry, but I can't if i try as an array element, or similar. — CreativeZoller, Apr 13 '15 at 10:14

score 0 · Answer 2 · answered Apr 13 '15 at 08:28

0

You could use angular resource:

angular.module('portApp').factory('Port', function ($resource) {
    return $resource('ports.json');
});

answered Apr 13 '15 at 08:28

Lionel Nguyen

25
2

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

From another Stack Overflow thread:

theApp.factory('mainInfo', function($http) { 

    var obj = {content:null};

    $http.get('content.json').success(function(data) {
        // you can do some processing here
        obj.content = data;
    });    

    return obj;    
});

You can see it here:
AngularJS: factory $http.get JSON file

edited May 23 '17 at 10:28

Community

1
1

answered Apr 13 '15 at 08:28

Marin Takanov

1,079
3
19
36

score 0 · Answer 4 · answered Apr 13 '15 at 08:30

0

You forgot the function keyword in the $http.get and also the wrong variable name

$http.get('ports.json').then(function(res) { // <--- THIS
    var works = res.data;
});

answered Apr 13 '15 at 08:30

Andy

5,287
2
41
45

Load data from .json file into factory in Angular

4 Answers4