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

Question

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
  }

Can you please provide some more code showing your current approach of using this json object? — Kiran Varsani
– Kiran Varsani, Commented Jul 10, 2015 at 0:35
Set a breakpoint in your success function and see that your data parameter contains what you expect. — Craig Shearer
– Craig Shearer, Commented Jul 10, 2015 at 0:48

Yatrix · Accepted Answer · 2015-07-10 02:03:07Z

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.

Thank you so much this loop is worked..But I have one more question How can I fix my json result format ?
That's a little difficult to answer. Is the bottom part supposed to be a picture object? It looks like it's supposed to be, but you don't have the same fields in it.
Actually they have relationship (oneToMany) each other aboutUs and Picture table.So aboutUs table can have many picture but every picture can have one aboutUs
So Im getting aboutUs table from database as json.aboutUs have many picture.So the json result returning array to picture table as array json object in the aboutUs.
ok thank you so much for your answers you clear me up.I deleted my answer.

Collectives™ on Stack Overflow

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

1 Answer 1

EDIT

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

8 Comments

Related