JSON processing - Javascript

Question

I have the following script that holds a json.

$http({
      url: '/mpdValidation/mpdValidate',
      method: "POST",
      data: { 'message' : mpdData }
    ).then(function(response) {
    console.log(response.data.searchResults[0].customers);
    $rootScope.mpdValidatedData = response.data.searchResults[0].customers;
    var partyAddressesArray = $rootScope.mpdValidatedData['partyAddresses '];
    console.log(partyAddressesArray.length);
});

I will be viewing this in a table.

My concern is that, there are few arrays inside this json which I'm not able to iterate/process.

That is,

My json:

{
  "searchResults": [
    {
      "id": 1,
      "firstName": "kelly",
      "lastName": "johnson",
      "facets": {
        "totalCustomerfound": 118541
      },
      "customers": [
        {
          "score": 20,
          "fullName": "kelly kelly",
          "firstName": "kelly",
          "lastName": "kelly",
          "dob": "1963/01/22",
          "memNum": "42900711",
          "phoneList": [
            {
              "phoneType": "homephonenumber",
              "phoneExchange": "222",
              "phoneAreaCode": "111",
              "phoneNumber": "9198",
              "phoneFullNumber": "1112229198"
            },
            {
              "phoneType": "primaryphonenumber",
              "phoneExchange": "444",
              "phoneAreaCode": "333",
              "phoneNumber": "9198",
              "phoneFullNumber": "3334449198"
            }
          ],
          "partyAdresses": [
            {
              "addressType": "home",
              "address1": "22 IRON KETTLE ST",
              "zipCode": "89130-2222",
              "city": "LAS VEGAS",
              "state": "NV"
            },
            {
              "addressType": "mailing",
              "address1": "11 SANDPIPER LN",
              "zipCode": "80601-1111",
              "city": "BRIGHTON",
              "state": "CO"
            }
          ],
          "policyList": [

          ],
          "membershipList": [
            {
              "termEffectiveDate": "2015/12/16",
              "termExpirationDate": "2016/12/16",
              "contractTransactionTimeStamp": "2017/09/05 19:46:29.722",
              "policyInceptionDate": "2015/12/16",
              "policyNumber": "112233",
              "policyStatus": "INACTIVE",
              "prodTypeCode": "MSHP",
              "productCode": "MSHP",
              "memType": "PREMIER",
              "contractAddress": [

              ],
              "roleList": [
                {
                  "roleType": "PRIMARY MEMBER",
                  "sourceId": "4290011",
                  "roleStatus": "INACTIVE",
                  "roleStartDate": "2015/12/16",
                  "membershipNumber": "4290011"
                }
              ]
            }
          ]
        }
        ]
    ]
}

My table:

<table id="mpdRecordTable" st-table="display_mpd_records"
   st-safe-src="mpdValidatedData" ng-show="mpdValidatedData"
   class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="mpdController">
   <caption>*MPD - Validated customer returns</caption>
   <thead class="thead-dark">
      <tr>
         <th>First name</th>
         <th>Last name</th>
         <th>Date of birth</th>
         <th>Policy number</th>
         <th>Policy status</th>
         <th>Address type</th>
         <th>Address</th>
         <th>Phone number</th>
      </tr>
   </thead>
   <tbody>
      <tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_mpd_records">
         <td ng-bind="row.firstName"></td>
         <td ng-bind="row.lastName"></td>
         <td ng-bind="row.dob"></td>
         <td ng-bind="row.policyNumber"></td>
         <td ng-bind="row.policyStatus"></td>
         <td ng-bind="row.addressType"></td>
         <td ng-bind="row.address"></td>
         <td ng-bind="row.phoneNumber"></td>
      </tr>
   </tbody>
</table>

Since partyAddresses in my json is an array, it is not getting shown in row.address. I need address1,address2,city,state,zipCode of home addressType from the json as a single string to be displayed in the row.address column.

Likewise the same for phoneNumber, the homePhone must be viewable.

The first name, last name are populating as expected but not the address and phone numbers. Can someone help?

Answer 1

You can try ng-repeat in the particular row, like this

    <td>
     <div ng-repeat="addr in row.partyAdresses"> 
         {{addr. address1}}, {{addr. address2}} ...so on 
      <br>
     </div>
    </td>

similarly for phoneNumber etc.,

Answer 2

Inside your controller you can use the spread operator [...array] to convert your array into a string before passing it to your view, for more infos check the following link :

Spread Operator Doc on MDN