Javascript not binding

Question

I am trying to link my javascript file and json file to my html file and it does not seem to be working.

Here is the json file :

[
{
    "tops" : [
        { "image" : "images/top1.jpg" },
        { "image" : "images/top2.jpg" },
        { "image" : "images/top3.jpg" },
        { "image" : "images/top4.jpg" }
    ]
},

{
    "bottoms" : [
        { "image" : "images/jeans1.jpg" },
        { "image" : "images/jeans2.jpg" },
        { "image" : "images/jeans3.jpg" },
        { "image" : "images/jeans4.jpg" }
    ]
}
]

Here is the javascript file :

(function(){

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

app.controller('ContentController', ['$scope', 'http', function ($scope,$http) {

    $http.get('imagedata.json').then(function(contentData){

        $scope.imageArray = contentData.data;
        $scope.imageCount = $scope.imageArray.length;

    });



}]);

})();

Here is the html file:

 <!DOCTYPE html>
 <html lang="en" ng-app="myContent">
 <head>
 <meta charset="UTF-8">
 <title>ShopME Tops</title>
 <link rel="stylesheet" type="text/css" href="mystyle.css"/>
 <link rel="stylesheet" 
  href="https://cdnjs.cloudflare.com/ajax/libs/font-
  awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>

<body>



<!-- Container for grid layout -->
<div ng-controller="ContentController" class="container">
    <!-- Container for row -->
    <div class="row">
        <!-- Container for col -->
        <div> {{ imageCount }}</div>
    </div>
</div>

</body>
</html>

In my html file I am trying to display the count of my imageArray, which should be 2 but right now all I am seeing is the actual word 'imageCount'.

Does anyone see what I am doing wrong?

Rayon · Accepted Answer · 2017-07-16 02:34:47Z

Check console for errors.
Use $http, not http module in your dependencies.

(function() {
  var app = angular.module('myContent', []);
  app.controller('ContentController', ['$scope', '$http', function($scope, $http) {
    var contentData = [{
        "tops": [{
            "image": "images/top1.jpg"
          },
          {
            "image": "images/top2.jpg"
          },
          {
            "image": "images/top3.jpg"
          },
          {
            "image": "images/top4.jpg"
          }
        ]
      },

      {
        "bottoms": [{
            "image": "images/jeans1.jpg"
          },
          {
            "image": "images/jeans2.jpg"
          },
          {
            "image": "images/jeans3.jpg"
          },
          {
            "image": "images/jeans4.jpg"
          }
        ]
      }
    ];
    $scope.imageArray = contentData;
    $scope.imageCount = $scope.imageArray.length;
  }]);
})();

<!DOCTYPE html>
<html lang="en" ng-app="myContent">

<head>
  <meta charset="UTF-8">
  <title>ShopME Tops</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
  awesome/4.7.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script type="text/javascript" src="myscript.js"></script>
</head>

<body>
  <div ng-controller="ContentController" class="container">
    <div class="row">
      <div> {{ imageCount }}</div>
    </div>
  </div>
</body>

</html>

@Cameron -- glad you found your answer-- don't forget to come back and mark Rayon's answer as your selected correct answer!

Collectives™ on Stack Overflow

Javascript not binding

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related