Load data from .json file to factory in Angular

Question

I have a factory that loads data from an array or a selected item from this array. But if I translate it to an external .json file, I just get errors - I'm new to angular, but try my best, keep in mind ^^ Therefore, if I use simple

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

I get "ReferenceError: works not defined". And if I try

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

I get the error Uncaught SyntaxError: Unexpected token {". But this code is not in the factory, it works on a whole different page, so I don’t know what might be wrong now: / Here is the .json file and @ link, you can check 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: , , , ... , , .json, .

  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;
      }
  };

Answer 1

Plunker.

:

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;
            }
        };
    });

:
1. then . (portRes) function(portRes).

2. var works = res.data . . res portRes.

3. works var wont , var, . , $http.get , , .

Edit:
, , , - ( , , -):

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;
}

Answer 2

angular:

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

Answer 3

:

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

Answer 4

You forgot the keyword functionin $http.get, as well as the wrong variable name

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