Accessing Json objects

Question

{"Kind": {
"Food": {
    "color": "0",
    "size": "31",
    "shape": "round"
},
"Drink": {
    "color": "0",
    "size": "34",
    "shape": "square"
},
"Condiments": {
    "color": "0",
    "size": "52",
    "shape": "rectangle"
}

Hi I have this in a JSON and I'm trying to put it in a table in it would just show the Kind for example Food and shape referring to round.

Do you guys know any way on how I can extract it?

Before it was easier for me to get the data because the format of the JSON

 var obj = [
{
    "Kind": "Food",
    "shape": "round"
}, {
    "Kind": "Drink",
    "shape": "square"
}, {
    "Kind": "Condiments",
    "shape": "rectangle"
}]

Calling it was easy as

<td>{{obj.Kind}}</td><td>{obj.shape}}</td>

Now I'm not really sure on how to do it with the new json format..

Amaranadh Meda · Accepted Answer · 2015-01-23 07:36:00Z

1

As per my understanding of your problem the following is the answer for your question .

Your html code like this

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <th>Type</th> <th>Shape</th>
        </tr>
        <tr ng-repeat="(key ,value) in list.Kind">
            <td>{{key}}</td><td>{{value.shape}}</td>
       </tr>

    </table>

</div>

After that your javascript like this

var myApp = angular.module("myApp", []);

    myApp.controller("myController", function($scope){

         $scope.list ={"Kind": {
    "Food": {
        "color": "0",
        "size": "31",
        "shape": "round"
    },
    "Drink": {
        "color": "0",
        "size": "34",
        "shape": "square"
    },
    "Condiments": {
        "color": "0",
        "size": "52",
        "shape": "rectangle"
    }
         }
                      };

    });

Finally the output is

Type Shape

Condiments rectangle

Drink square

Food round

answered Jan 23, 2015 at 7:36

Amaranadh Meda

7244 silver badges12 bronze badges

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

1 Comment

Gio Perez Over a year ago

Did great help!! Thanks a bunch! :)

Anid Monsur · Accepted Answer · 2015-01-23 06:53:37Z

1

ng-repeat can iterate over objects. Assuming your JSON is stored in $scope.data:

<tr ng-repeat="(type, attributes) in data.Kind">
  <td>{{ type }}</td><td>{{ attributes.shape }}</td>
</tr>

answered Jan 23, 2015 at 6:53

Anid Monsur

4,5381 gold badge19 silver badges24 bronze badges

Comments

chandings · Accepted Answer · 2015-01-23 06:55:51Z

0

you html code would be like this

<div ng-app="myApp" ng-controller="myController">
    <table>
        <tr ng-repeat="obj in list"><td>{{obj.Kind}}</td><td>{{obj.shape}}</td></tr>

    </table>

</div>

JS code would be like this

var myApp = angular.module("myApp", []);

myApp.controller("myController", function($scope){
     $scope.list = [
        {
            "Kind": "Food",
            "shape": "round"
        }, {
            "Kind": "Drink",
            "shape": "square"
        }, {
            "Kind": "Condiments",
            "shape": "rectangle"
        }]
});

if you want a working code then please got here.

answered Jan 23, 2015 at 6:55

chandings

5493 gold badges9 silver badges23 bronze badges

4 Comments

Gio Perez Over a year ago

You must have misunderstood the question. Well I'm using now the first block of code I pasted on the question :) The second block of code was the one I was using before hehe Thanks anyway

chandings Over a year ago

the response in the first block does not have any order. so if you do not what to expect you will need to create array from object and then order it. If you do know what to expect then you can create a template on client side .

chandings Over a year ago

i updated the code with the assumption that you know the structure of the response. jsfiddle.net/chandings/x8jeufz3/6 @Anid Monsur's response is very good and i think it will work.

chandings Over a year ago

It does work i updated my answer and added his code as well. the updated link is jsfiddle.net/chandings/x8jeufz3/7

Nikhil Vasdev · Accepted Answer · 2015-01-23 07:34:23Z

When you get the response from service: (Assuming response)

response = { "Kind": {
                    "Food": {
                    "color": "0",
                    "size": "31",
                    "shape": "round"
             },
               "Drink": {
               "color": "0",
               "size": "34",
              "shape": "square"
             },
              "Condiments": {
              "color": "0",
              "size": "52",
              "shape": "rectangle"
             } 
          }
       }

$scope.Condiments = response.Kind.Condiments;
$scope.Drinks = response.Kind.Drink;

And on front end you can access that object like below

  {{Condiments.size}}
  {{ Drinks.size }}

Or you can use the object iteration on ng-repeat

V31 · Accepted Answer · 2015-01-23 08:18:34Z

You can create an array out of the json object that you have and work normally like you were doing before

Example Plunkr

Code Snippet:

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

app.controller('MainCtrl', function($scope) {
  $scope.list = {"Kind": {
      "Food": {
          "color": "0",
          "size": "31",
          "shape": "round"
      },
      "Drink": {
          "color": "0",
          "size": "34",
          "shape": "square"
      },
      "Condiments": {
          "color": "0",
          "size": "52",
          "shape": "rectangle"
      }
    }
  }

  var listKeys = Object.keys($scope.list);
  $scope.arrayOfKind = [];
  var kindObj;
  for (var kind in $scope.list[listKeys]) {
    kindObj = {};
    kindObj.kind = kind;
    kindObj.shape = $scope.list[listKeys][kind].shape;
    kindObj.size = $scope.list[listKeys][kind].size;
    $scope.arrayOfKind.push(kindObj);
  }
});

Collectives™ on Stack Overflow

Accessing Json objects

5 Answers 5

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related