Dynamically populating the number of tables based on JSON input obtained - angularJS - html

Question

I'm trying to populate number of tables dynamically by the input I get via JSON in angularJS.
I am perplexed on what to use and how to use since I am a learner in angular.
Would be helpful if anybody could help.
I have this JSON obtained in my script.
{
"took": 167,
"timed_out": false,
"_shards": {
"total": 10,
"successful": 10,
"skipped": 0,
"failed": 0
},
"hits": {
"total": 2,
"max_score": 22.126987,
"hits": [
{
"_type": "data",
"_id": "3423",
"_score": 22.126987,
"_source": {
"mdmId": "45234",
"fullName": "rick j cruz",
"firstName": "rick",
"middleName": "j",
"lastName": "cruz",
"gender": "MALE",
"employeeInd": "N",
"phoneList": [],
"partyAdresses": [
{
"addressType": "home",
"address1": "xxx",
"address2": "yyy",
"city": "SAN JOSE",
"state": "CA",
"zipCode": "zzz"
},
{
"addressType": "mailing",
"address1": "xxx",
"address2": "yyy",
"city": "SAN JOSE",
"state": "CA",
"zipCode": "zzz"
}
],
"policyList": [
{
"agencyCode": "50000",
"agentid": "500",
"sourceSystem": "unit",
"policyNumber": "123",
"policyNumberRaw": "123",
"policyStatus": "CANCELLED",
"roleList": [
{
"roleType": "INSURED",
"roleStatus": "ACTIVE",
},
{
"roleType": "LISTED DRIVER",
"roleStatus": "ACTIVE",
}
]
}
]
}
},
{
"_type": "data",
"_id": "3423",
"_score": 22.126987,
"_source": {
"mdmId": "45234",
"fullName": "rick j cruz",
"firstName": "rick",
"middleName": "j",
"lastName": "cruz",
"gender": "MALE",
"employeeInd": "N",
"phoneList": [],
"partyAdresses": [
{
"addressType": "home",
"address1": "xxx",
"address2": "yyy",
"city": "SAN JOSE",
"state": "CA",
"zipCode": "zzz"
},
{
"addressType": "mailing",
"address1": "xxx",
"address2": "yyy",
"city": "SAN JOSE",
"state": "CA",
"zipCode": "zzz"
}
],
"policyList": [
{
"agencyCode": "50000",
"agentid": "500",
"sourceSystem": "unit",
"policyNumber": "123",
"policyNumberRaw": "123",
"policyStatus": "CANCELLED",
"roleList": [
{
"roleType": "INSURED",
"roleStatus": "ACTIVE",
},
{
"roleType": "LISTED DRIVER",
"roleStatus": "ACTIVE",
}
]
}
]
}
}
]
}
}
I now need to populate two different tables based on the total value, mentioned in the JSON.
In case if the JSON returns 3, 3 tables needs to be populated. Eg: Below format.
Can someone help me with a fiddle or something?

Answer 1

Since you want to render out n "hits" with (I guess) som intensive styling and a lot more info than described, I think you should place it in a small directive :
angular.module('myApp').directive('hitTable', function() {
return {
scope: {
hit: '='
},
templateUrl: 'views/hitTable.html'
}
});
hitTable.html could look like this (based on sample boxes in the question, add more of the info you want rendered and you must do the styling yourself) :
<div>
<div> {{ hit._source.mdmId }}</div> <!-- sample box #1 -->
<div> {{ hit._source.firstName }}, {{ hit._source.lastName }}</div> <!-- sample box #2 -->
<div>
<span ng-repeat="address in hit._source.partyAdresses"> <!-- n of sample box #3 -->
{{ address.address1 }}
{{ address.city }}
{{ address.state }}
</span>
</div>
<div>
Once registered in your app and assuming $scope.data hold the sample JSON above you can do
<div ng-repeat="hit in data.hits.hits">
<hit-table hit="hit"></hit-table>
</div>
In my opinion this is the real power of AngularJS (and its like). With very little effort you can have a rather complex page structure. What you need now is to style each "hit", i.e the content of hitTable.html.
NB: I intentionally forget all about "total" here. The important is the content you want to render out, i.e whats within the JSON.