I'm a beginner in working with Angular and JSON, so any help would be greatly appreciated.
I have a JSON array that contains information about users and the sellers from whom they have made purchases.
JSON:
[
{
"name":"Kakaro",
"sallers":[
{"sellername":"Naruto","payment":"250","date":"07\/07\/2014","receipt":"popup"},
{"sellername":"Sasuka","payment":"502","date":"08\/07\/2014","receipt":"popup"}
]
},
{
"name":"Collin Ferall",
"sallers":[
{"sellername":"Jonny deep","payment":"250","date":"07\/07\/2014","receipt":"popup"},
{"sellername":"Brad Pitt","payment":"502","date":"08\/07\/2014","receipt":"popup"}
]
}
]
What I'm trying to accomplish: I want to display the data of a user's sellers in a table when the user is selected.
I've tried several solutions, but so far, none have worked. I find myself back at square one.
Problem: I'm struggling to correctly access an array within another array in Angular.
HTML:
<div id="main" class="row" ng-controller='payment'>
<div>
<label>Client Name:</label><br/>
<select class="form-control input-sm" name="client_name">
<option ng-repeat="names in name" value="{{names.name}}" ng-model="select">{{names.name}}</option>
</select>
</div>
<div id="seller" class="margins_top">
<table class="table table-bordered">
<thead>
<tr>
<td>Seller Name</td>
<td>Payment</td>
<td>Date</td>
<td>Payment Receipt</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="sellers in seller">
<td>{{sellers.sellername}}</td>
<td>{{sellers.payment}}</td>
<td>{{sellers.date}}</td>
<td>{{sellers.receipt}}</td>
</tr>
</tbody>
</table>
</div><!-- /#seller -->
</div>
Controller js:
var app = angular.module('payment', []);
app.controller('payment',function($scope,$http){
getrecord(); // Load all available tasks
function getrecord(){
$http.post("angular/ajax/payment.php").success(function(data){
$scope.name = data;
$scope.seller = data[0].sallers;
});
}
});
I created a Fiddle but it didn't help much. Here's the link to it: