Break Up JSON Response in Multiple Arrays

Question

I am trying to break up this json response into multiple arrays that I can access on the front end. I've got a json response such as:

 {
"clients": [
{
  "id": "2",
  "f_name": "test",
  "l_name": "test",
  "email": "[email protected]",
  "company_name": "asd",
  "street": "asd",
  "city": "asd",
  "state": "asd",
  "zip": "54913",
  "identity_id": "6",
  "admin_id": "1",
  "created_at": "2015-01-22 22:55:38",
  "updated_at": "2015-02-04 04:03:13"
},
{
  "id": "3",
  "f_name": "dsf",
  "l_name": "df",
  "email": "[email protected]",
  "company_name": "asdf",
  "street": "sdf",
  "city": "asdf",
  "state": "asdf",
  "zip": "asdf",
  "identity_id": "6",
  "admin_id": "1",
  "created_at": "2015-01-23 17:49:51",
  "updated_at": "2015-01-23 17:49:51"
}
   ],
  "identity": {
"id": "6",
"name": "Test Company",
"street": "13 Street",
"city": "An",
"state": "State",
"zip": "54913",
"admin_id": "1",
"created_at": "2015-01-17 15:34:12",
"updated_at": "2015-02-04 03:43:40",
"image": "https:\/\/s3_whatever",
"phone": "",
"email": "",
"paypal": "whatever_whatever.com"
  }
}

I would like to have 'clients' put into $scope.clients and identity put into $scope.identity

Here is my code:

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

 app.controller("TestController", function ($scope, $http) {


$http.get('http://localhost:8000/clients/json').success(function(clients) {
    $scope.clients = clients.clients;
    $scope.identity = clients.identity; 
});


 });

Here is the front end code:

    <div ng-app="myApp">

 <div ng-controller="TestController">
<ul>

 <li ng-repeat="client in clients">
 {{ client.email }}
 </li>

</ul>
 </div>

 <h1>
 {{ identity }}
 </h1>

 </div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js">     </script>
<script src='/js/app.js'></script>

It is not. I also attempted to use $scope.clients = clients.clients (and $scope.identity = clients.identity) which also does not return the identity. The clients array seems to work OK with this front end code: * added to the top * — TerryG
– TerryG, Commented Feb 6, 2015 at 23:03
Are you sure the json is in the format that you posted. I copied and pated it and it's working fine: Plunkr — Wayne Ellery
– Wayne Ellery, Commented Feb 6, 2015 at 23:08
I am copy/pasting from the actual response. I updated my code above to include the the entire app.js file — TerryG
– TerryG, Commented Feb 6, 2015 at 23:10
Also updated the entire front end code... maybe i am doing something wrong there? — TerryG
– TerryG, Commented Feb 6, 2015 at 23:14

user2033671 · Accepted Answer · 2015-02-06 23:16:14Z

1

Your closing out your controller and making identity out of scope

<div ng-app="myApp">  
    <div ng-controller="TestController">
        <ul>
            <li ng-repeat="client in clients">
                {{ client.email }}
            </li>
        </ul>
    </div><!--END OF TEST CONTROLLER AND $Scope FOR THAT CONTROLLER -->   
    <h1>
 {{ identity }}
 </h1>  
</div>

to fix it just move your h1 into the controller div

<div ng-app="myApp"> 
    <div ng-controller="TestController">
        <ul> 
            <li ng-repeat="client in clients">
                {{ client.email }}
            </li>
        </ul>
       <h1>{{ identity }}</h1>
    </div><!-- end of TestController -->
</div><!-- end of myApp -->

answered Feb 6, 2015 at 23:16

user2033671

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

Collectives™ on Stack Overflow

Break Up JSON Response in Multiple Arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related