Why does my scoped property is undefined whereas my json data is correctly recovered with http.get?

Question

Context : I'm working on a "event repertory" website.

I've created a php page using json encode to have my data writted as a json file. I have no problem with that. All works fine. I mean I can display the data in my homepage with a loop without problem.

The problem begin when I want to access to there individuals details.

My variable just don't recognize the data I want her to scope. That's very strange cause I used the same method on another project, which worked perfectly but anyway. Here is my code, and I want my scope to take (for example) my title value, what am I doing wrong or how can I proceed overwise ?

Really, a big thank you for your time after many research on Google and hours thinking my problem. Posting my question here is really my last option. Yet, It's my first time.

I've tried to use $rootScope & $routeParams instead of $scope but that doesn't work either. Also tried to use $location and ngSanitize, yet I wasn't understanding what I was doing, I never used that. I've console logged everything that has ever exists, lol.

I'm not sure I have to run (cf last part) those elements, yet I tried many things.

Here is what my Google Chrome console returns as error :

TypeError: Cannot read property 'title' of undefined at new (myRoutes.js:350)

PS : line 350 is the line where "$scope.title = $scope.events[$scope.eventID].title;" is written.

Here is what my Firefox console returns as error :

TypeError: "$scope.events[$scope.eventID] is undefined" myRoutes.js:350 Angular 20

 <div ng-view="" class="ng-scope">

Note : My console.log($scope.eventID) correctly returns the number I want. But for the title and all, he's just saying It's undefined.

I can barely see where the problem is but I just don't know how to solve it. Once again, thank you for your time. Many questions of json data displaying errors have been asked, yet I couldn't that kind of situation with the method I'm using.

PS : I know AngularJS is being old. I'll learn Angular later but can't right know.

.controller('detailsCtrl', function($scope, $http, $rootScope, $routeParams){
    $http.get('partials/allEvents.php') // On récupère le contenu du fichier php
    .then(function(res){
       $scope.events = res.data;
    });
    $scope.eventID = $routeParams.eventID;
    console.log($scope.eventID);
    $scope.title = $scope.events[$scope.eventID].title;
    $scope.image = $scope.events[$scope.eventID].image;
    $scope.area = $scope.events[$scope.eventID].area;
    $scope.city = $scope.events[$scope.eventID].city;
    $scope.theme = $scope.events[$scope.eventID].theme;
    $scope.type = $scope.events[$scope.eventID].type;
    $scope.beginDate = $scope.events[$scope.eventID].beginDate;
    $scope.endDate = $scope.events[$scope.eventID].endDate;
    $scope.numberOfVisitors = $scope.events[$scope.eventID].numberOfVisitors;
    $scope.shortBio = $scope.events[$scope.eventID].shortBio;
    $scope.longBio = $scope.events[$scope.eventID].longBio;
    console.log($scope.title);
    //$scope.title = $scope.events[$scope.eventID].title;
    //$scope.title = $scope.events[$scope.eventID].title;
})

//Here is the page where I'm trying to display the data :

<div ng-controller="detailsCtrl">
    <h1>{{title}}</h1>
    <h1>{{events.title}}</h1>
    <h1>{{event.title}}</h1>
</div>

//Here is my code, before my $routeProvider (which works fine don't worry) :

var leCalendrierDuGeek = angular.module('leCalendrierDuGeek', ['ngRoute']);
leCalendrierDuGeek.run(function($rootScope, $http){
  //array initialised
    $rootScope.events=[];

    $http.get("partials/allEvents.php")
    .then(function(response) {
        $rootScope.events = response.data;
        console.log($rootScope.events);
      });
});

score 0 · Answer 1 · answered Aug 25 '19 at 17:39

The callback of GET request will be called asynchronously when the response is available:

.then(function(res){
   $scope.events = res.data;
   // here you can get any property values from `$scope.events`
});
// here `$scope.events` is still undefined, so you get that console error

Why does my scoped property is undefined whereas my json data is correctly recovered with http.get?

1 Answers1