CODEWITHSUNDEEP
javascriptangularjsjson
Mina Medhat
Mina Medhat

Reputation: 25

Can't call json file into factory in Angular

I have a factory which loads data from Json file for ng-repeat but when I'm using ng-repeat it can't work

there is my factory

quizApp.factory("DataService", dataService);
function dataService($http) {
var dataObj = {
    mainInfo: null,
    getList: getList()
}

function getList() {
$http.get('data/list.json').then(function (myData) {
    return myData.data.listInfo;

});
}
  return dataObj;
}

and that the controller

quizApp.controller('listCtrl',function(DataService,$scope,$http){
    $scope.listInfo = dataService.getList;

    $scope.changeActiveInfo =function(index){
        $scope.activeInfo = index;
    }
    $scope.activateQuiz = function (){
    QuizMetrics.changState("quiz", true);
    }
});

my json file

{
    "listInfo": [{
        "type": "Green Turtle",
        "image_url": "http://www.what-do-turtles-eat.com/wp-
        content/uploads/2014/10/Sea-Turtles-Habitat.jpg",
        "locations": "Tropical and subtropical oceans worldwide",
        "size": "Up to 1.5m and up to 300kg",
        "lifespan": "Over 80 years",
        "diet": "Herbivore",
        "description": "The green turtle is a large, weighty sea turtle with a wide, smooth carapace, or shell. It inhabits tropical and subtropical coastal waters around the world and has been observed clambering onto land to sunbathe. It is named not for the color of its shell, which is normally brown or olive depending on its habitat, but for the greenish color of its skin. There are two types of green turtles—scientists are currently debating whether they are subspecies or separate species—including the Atlantic green turtle, normally found off the shores of Europe and North America, and the Eastern Pacific green turtle, which has been found in coastal waters from Alaska to Chile."
},
{
    "type": "Loggerhead Turtle",
    "image_url": "http://i.telegraph.co.uk/multimedia/archive/02651/loggerheadTurtle_2651448b.jpg",
    "locations": "Tropical and subtropical oceans worldwide",
    "size": "90cm, 115kg",
    "lifespan": "More than 50 years",
    "diet": "Carnivore",
    "description": "Loggerhead turtles are the most abundant of all the marine turtle species in U.S. waters. But persistent population declines due to pollution, shrimp trawling, and development in their nesting areas, among other factors, have kept this wide-ranging seagoer on the threatened species list since 1978. Their enormous range encompasses all but the most frigid waters of the world's oceans. They seem to prefer coastal habitats, but often frequent inland water bodies and will travel hundreds of miles out to sea."
}

and when I'm using ng-repeat="list in listInfo" it doesn't work

Upvotes: 0

Views: 52

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You aren't returning anything from getList function. Ideally it should return promise for your case.

getList() {
  return $http.get('data/list.json').then(function (myData) {
    return myData.data.listInfo;
  });
}

And then access data calling .then over getList method.

dataService.getList().then(function(list){
   $scope.listInfo = list;
});

Upvotes: 1

Related Questions