Import JSON data for AngularJS Web App

Question

I have been following the Angular tutorials, and I am trying to get my JSON data to appear, yet I know I am doing something wrong, but can't figure out the proper method.

I know that somewhere in my app.js my scope is messed up.

How can I display the Family Name of each product?

Here is the layout I have:

app.js

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

eloApp.controller('homeListController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('/Elo/eloMS.min.json')
            .success(function(data) {
                $scope.products = data;
            });
}]);

eloApp.controller('HomeController', function(){
    this.products = $scope.products;
});

HTML

<div ng-controller="HomeController as home">
        {{home.products[o]["Family Name"]}}
</div>

JSON Layout

{
  "products": [
    {
      "Family Name": "3201L",
      "Type": "IDS",
      "Size (inches)": 32,
      "Aspect Ratio": "16:9",
      "Part Number": "E415988",
      "Product Description": "ET3201L-8UWA-0-MT-GY-G",
      "Marketing Description": "3201L 32-inch wide LCD  Monitor",
      "Advance Unit Replacement": "",
      "Elo Elite": "",
      "Package Quantity": 1,
      "Minimum Order Quantity": 1,
      "List Price": 1800
    },
    .
    .
    .
  ],
  "families": [
     {
       category: "Category1"
     },
     {
       category: "Category2"
     }
  ],
  "accessories": [
     {
       category: "Category1"
     },
     {
       category: "Category2"
     }
  ]
}

The scope in your first controller is not the same as your second controller! Try adding the code in the first controller to the second controller and removing the first one. — Pepijn
– Pepijn, Commented Sep 24, 2015 at 19:48

Pankaj Parkar · Accepted Answer · 2015-09-24 20:31:55Z

4

You should add homeListController on your page instead of HomeController, Also need to use this instead of using $scope as you wanted to follow controllerAs syntax, 2nd controller is useless in this scenario, you could remove that from app.js.

Markup

<div ng-controller="homeListController as home">
        {{home.products[0]["Family Name"]}}
</div>

Controller

eloApp.controller('homeListController', ['$http',
    function($http) {
        var home = this;
        $http.get('/Elo/eloMS.min.json')
            .success(function(data) {
                home.products = data.products; //products should mapped here
            });
}]);

Demo Plunkr

edited Sep 24, 2015 at 20:31

answered Sep 24, 2015 at 19:49

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adjit Over a year ago

I did that, however I am getting an error - [$parse:lexerr] not sure what that means, but I was getting it before as well. Going to do some research on that error, but what could be the cause?

Pankaj Parkar Over a year ago

@Adjit it should be home.products[0]["Family Name"] replace o with 0

Adjit Over a year ago

Ahh, I am an idiot... not sure why I had a o must've been a typo. However, no family name appears with no errors... is my {{...}} pointing to the right location?

Pankaj Parkar Over a year ago

@Adjit take a look at updated answer and demo plunkr..will clear out the idea..& where you are wrong, basically you missed to mapped products home.products = data.products;

Adjit Over a year ago

Nailed it! Thanks, I was pointing to the wrong location for the JSON file, didn't check the console.

|

Collectives™ on Stack Overflow

Import JSON data for AngularJS Web App

app.js

HTML

JSON Layout

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

app.js

HTML

JSON Layout

1 Answer 1

6 Comments

Related