CODEWITHSUNDEEP
asp.netjsonasp.net-mvcangularjs
Emre
Emre

Reputation: 55

Json's data access with angularjs on Asp.NET MVC

Hello guys I have problem..Actually I dont know hot to access some datas in json with angularjs. I just learning angularjs.

<div ng-controller="KurumsalYonetimCtrl">
    <p>{{model | json}}</p>
    <div ng-repeat="item in model">
        <p>{{item.Id}}</p>
        <p>{{item.Baslik}}</p>
        <p>{{item.Aciklama}}</p>
        <p>{{item.ResimYolu}}</p> /*This is PicturePath but it doesnt show*/
    </div>

</div>

AngularJS Controller Code

    var app = angular.module('KurumsalYonetimController', []);
    app.controller('KurumsalYonetimCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.model = {};
        $http.get('/KUN/KurumsalYonetim/JsonListele').success(function (data) {
            $scope.model = data;
        });
    }]);

JSON DATA 

[
      {
        "Pictures": [
          {
            "history": null,
            "landTransportation": null,
            "partialManagment": null,
            "projectTransportation": null,
            "userDetail": null,
            "Baslik": "Hakkimizda Resim",
            "Kategori": "Genel",
            "Aciklama": null,
            "ResimYolu": "1b066060-d230-45d7-a7ed-fc87bf3bd7d1_profile_avatar.jpg",
            "aboutUsId": 5,
            "historyId": null,
            "landTransportationId": null,
            "projectTransportationId": null,
            "partialManagmentId": null,
            "userDetailId": null,
            "Id": 5,
            "isDeleted": false,
            "CreatedDate": "2015-07-09T02:02:44.473",
            "UpdatedDate": "2015-07-09T02:02:44.473",
            "hasPicture": false
          }
        ],
        "userDetail": null,
        "Baslik": "deneme baslik",
        "Aciklama": "deneme aciklama",
        "userDetailId": null,
        "Id": 5,
        "isDeleted": false,
        "CreatedDate": "2015-07-09T02:02:44.16",
        "UpdatedDate": "2015-07-09T02:02:44.553",
        "hasPicture": true
      }
    ]

I cant access Pictures in this json result, but i can access these datas.How can I access also Pictures

  "userDetail": null,
    "Baslik": "deneme baslik",
    "Aciklama": "deneme aciklama",
    "userDetailId": null,
    "Id": 5,
    "isDeleted": false,
    "CreatedDate": "2015-07-09T02:02:44.16",
    "UpdatedDate": "2015-07-09T02:02:44.553",
    "hasPicture": true
  }

Upvotes: 1

Views: 64

Answers (1)

Yatrix
Yatrix

Reputation: 13775

Your JSON looks wrong. The reason you can access the bottom part is that you're looping through an array of objects. 

 {
        "Pictures": [
          {
            "history": null,
            "landTransportation": null,
            "partialManagment": null,
            "projectTransportation": null,
            "userDetail": null,
            "Baslik": "Hakkimizda Resim",
            "Kategori": "Genel",
            "Aciklama": null,
            "ResimYolu": "1b066060-d230-45d7-a7ed-fc87bf3bd7d1_profile_avatar.jpg",
            "aboutUsId": 5,
            "historyId": null,
            "landTransportationId": null,
            "projectTransportationId": null,
            "partialManagmentId": null,
            "userDetailId": null,
            "Id": 5,
            "isDeleted": false,
            "CreatedDate": "2015-07-09T02:02:44.473",
            "UpdatedDate": "2015-07-09T02:02:44.473",
            "hasPicture": false
          }
        ],
        "userDetail": null,
        "Baslik": "deneme baslik",
        "Aciklama": "deneme aciklama",
        "userDetailId": null,
        "Id": 5,
        "isDeleted": false,
        "CreatedDate": "2015-07-09T02:02:44.16",
        "UpdatedDate": "2015-07-09T02:02:44.553",
        "hasPicture": true
      }

That is all one object, which is your item in your ng-repeat. So, when you loop, it can grab that Id, Aciklama, etc. The reason you aren't getting the Id for Pictures is because it's a nested array of objects. You have to go another level in to get the Id, Baslik, etc. inside the Pictures array.

To loop the pictures, do this: $scope.Pictures = model[0].Pictures; and then item in Pictures

Your JSON looks malformed to me.

EDIT

After some feedback in the comments, the JSON looks like it's the way it should be. You just need to make the changes I detailed above to get the picture data in your ng-repeat.

Upvotes: 2

Related Questions