AngularJs. Reading JSON properly

Question

I am noob in AngularJS, but trying to learn my way through it.

I have the following controller. It get's JSON file based on the URL.

app.controller('PortfolioItemCtrl', ['$scope', '$routeParams', '$http',
    function($scope, $routeParams, $http) {
        $http.get('pages/portfolio/' + $routeParams.itemId + '.json').
            success(function(data) {
                $scope.item = data;
        });
}]);

The problem that I seems not able to read this JSON as I expect.

Here how I am trying to fetch this data in my HTML:

      <div ng-controller="PortfolioItemCtrl">
        <h1>{{item.cat}}</h1>
        <p>{{item.desc}}</p>
      </div>

And my JSON looks like this

{
    "item_1": {
        "id":"1",
        "cat": "Web design",
        "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand",
        "images": [
            "img/portfolio-item-1.jpg",
            "img/portfolio-item-2.jpg"
        ]
    }
}

But it does not render any data. However if I put {{item}} in the HTML, I can see that it fetches the JSON file.

Please help me to understand what I am doing wrong. I would appreciate your explanation and some direct advice on what to focus in learning AngularJS in respect to this particular topic.

alpinescrambler · Accepted Answer · 2014-09-05 08:25:22Z

2

Try

   <div ng-controller="PortfolioItemCtrl">
    <h1>{{item.item_1.cat}}</h1>
    <p>{{item.item_1.desc}}</p>
  </div>

answered Sep 5, 2014 at 8:25

alpinescrambler

1,9641 gold badge17 silver badges28 bronze badges

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

1 Comment

jonny pixel Over a year ago

Funny thing I though I have already tried that. But yes, that was the case.

Marwie · Accepted Answer · 2014-09-05 08:54:52Z

2

Looks like your JSON data is

{ 
    $scope.item = {
        "item_1": {
            "id":"1",
            "cat": "Web design",
            "desc": "Online magazine design for <em> \"Calcus\" <\/em> brand",
            "images": [
                "img/portfolio-item-1.jpg",
                "img/portfolio-item-2.jpg"
            ]
        }
    }
}

So just call {{item.item_1.cat}} instead {{item.cat}} with your template

edited Sep 5, 2014 at 8:54

Marwie

3,3473 gold badges31 silver badges54 bronze badges

answered Sep 5, 2014 at 8:26

dddd1919

8885 silver badges15 bronze badges

1 Comment

jonny pixel Over a year ago

Yes, that was the case. :) Thanks

Collectives™ on Stack Overflow

AngularJs. Reading JSON properly

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related