CODEWITHSUNDEEP
javascripthtmlangularjsjson
Mazen Mohamed
Mazen Mohamed

Reputation: 37

Can't access a nested JSON object in HTML

AngularJS V1.6.4

$scope.aCourse["name"] is logged to console correctly, but in the HTML code nothing is populated into the screen. 

$scope.getCourse = function(idd){
        $http.defaults.headers.common['Authorization'] = 'Basic ' + btoa($cookieStore.get('username') + ':' + $cookieStore.get('password')  );
        $http({
              method: 'GET',
              url: 'http://localhost:8080/course/'+idd,

            }).then(function successCallback(response) {
                $scope.aCourse = response.data;
                console.log($scope.aCourse["name"]);

                window.location = "/website-take-course.html";
              }, function errorCallback(response) {
                  alert("Course data in fetching failed");
              });
    }

HTML Code:

<div class="page-section padding-top-none" ng-repeat="c in aCourse" >
            <div class="media media-grid v-middle">
              <div class="media-left">
                <span class="icon-block half bg-blue-300 text-white">1</span>
              </div>
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{c.name}}</h1>
              </div>
            </div>
            <br/>
            <p class="text-body-2">{{c.description}}</p>
          </div>

Upvotes: 1

Views: 201

Answers (3)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

There could be a two situations :

1. $scope.aCourse is an array of objects [{},{},{}].

DEMO

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

myApp.controller('MyCtrl', function($scope) {
    $scope.aCourse = [
      {
        "name": "alpha",
        "description" : "description1"
      },
      {
        "name": "beta",
        "description" : "description2"      
      },
      {
        "name": "gamma",
        "description" : "description3"      
      }
    ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="page-section padding-top-none" ng-repeat="c in aCourse" >
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{c.name}}</h1>
              </div>
            <p class="text-body-2">{{c.description}}</p>
          </div>
</div>

2. $scope.aCourse is an Object {......}.

DEMO

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

myApp.controller('MyCtrl', function($scope) {
    $scope.aCourse = {
        "name": "alpha",
        "description" : "description1"
      };
    console.log($scope.aCourse["name"]);  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div class="page-section padding-top-none" ng-repeat="(key, value) in aCourse" >
              <div class="media-body" >
                <h1 class="text-display-1 margin-none" >{{value}}</h1>
              </div>
          </div>
</div>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222532

Based on your post, it lookes like $scope.aCourse is a object, not an array.

change it as follows,

<div class="page-section padding-top-none" ">
    <div class="media media-grid v-middle">
        <div class="media-left">
            <span class="icon-block half bg-blue-300 text-white">1</span>
        </div>
        <div class="media-body">
            <h1 class="text-display-1 margin-none">{ aCourse.name }}</h1>
        </div>
    </div>
    <br/>
    <p class="text-body-2">{{aCourse.description}}</p>
</div>

or use something like this to iterate over object,

 <div ng-repeat="(key,value) in aCourse">
      {{key}} : {{value}}
  </div>

DEMO

var app = angular.module('filterApp', []);
app.controller('myCtrl', function($scope) {

    $scope.aCourse = {
      "content": "SO",
      "description": "Programmers"
    };

 
});
<!DOCTYPE html>
<html >
<head>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="filterApp" ng-controller="myCtrl">
    <div ng-repeat="(key,value) in aCourse">
     {{key}} : {{value}}
    </div>
</body>

</html>

Upvotes: 2

Ken
Ken

Reputation: 466

In your angular code you are setting aCourse to the response data. You then access the data as an object with:

$scope.aCourse["name"]

Then in your html you are running an ng-repeat on $scope.aCourse as if it were an array of objects:

<div class="page-section padding-top-none" ng-repeat="c in aCourse" >

You would either need to make aCourse an array of objects to use your current html, or update your html and access the object in aCourse with aCourse.name and aCourse.description.

Upvotes: -1

Related Questions