javascript - Iterating an Object using .map to display the inner array values

Question

I have a JSON stringified object as:

{
  "lesseeName": "Padyster-7",
  "lesseeRegNo": "12345",
  "lesseeVatNo": "4456",
  "telFaxNo": "1234567891",
  "billingAddress": {
    "addressId": null,
    "addressLine1": "XYz , l1 street",
    "addressLine2": "near xyz bank",
    "postalCode": "60000",
    "countryName": "MY",
    "cityName": "Kuala lumpur",
    "stateProvinceCode": "Kuala lumpur"
  },
  "mlaList": [{
    "mlaNo": 92,
    "lesseeId": 108,
    "executionDate": "27/01/2017",
    "signatoryInfo": "Test",
    "overdueRate": 3.44,
    "nonPaymentDays": 2,
    "consolidationTerm": "Monthly",
    "createdBy": null,
    "createdDtm": null,
    "updatedBy": null,
    "updatedDtm": null,
    "statusIndicator": null,
    "signatoryEmail": "tooot@gmail.com",
    "leaseMlaNo": "OPM1",
    "statusDescription": "APPROVED"
  }, {
    "mlaNo": 93,
    "lesseeId": 108,
    "executionDate": "03/01/2017",
    "signatoryInfo": "tess",
    "overdueRate": 5.77,
    "nonPaymentDays": 2,
    "consolidationTerm": "Bi-Monthly",
    "createdBy": null,
    "createdDtm": null,
    "updatedBy": null,
    "updatedDtm": null,
    "statusIndicator": null,
    "signatoryEmail": "xyz@gmail.com",
    "leaseMlaNo": "OPM2",
    "statusDescription": "APPROVED"
  }]
}

I am working in Reactjs and I want my object to be iterated such that the inner array mlaList of objects gets iterated to display value one after other. whenever I try using the .map function to the parent object I get an error saying ".map is not a function" below is the iteration I attempt which fails:

{data.map((data, index) => {data.leaseMlaNo}   {data.signatoryEmail})}

I have referred to the SO questions quite similar to this one, but they just talk about iterating the objects using Object.keys

Please help me understand what I am doing wrong and what should be the correct way to achieve this

Answer 1

The method Array#map is a method of the Array class, and not of the Object class. However, the mlaList property is an array, and you can iterate it. You should use data.mlaList.map():

// if the data is stringified - const data = JSON.parse({ the object });
const data = {"lesseeName":"Padyster-7","lesseeRegNo":"12345","lesseeVatNo":"4456","telFaxNo":"1234567891","billingAddress":{"addressId":null,"addressLine1":"XYz , l1 street","addressLine2":"near xyz bank","postalCode":"60000","countryName":"MY","cityName":"Kuala lumpur","stateProvinceCode":"Kuala lumpur"},"mlaList":[{"mlaNo":92,"lesseeId":108,"executionDate":"27/01/2017","signatoryInfo":"Test","overdueRate":3.44,"nonPaymentDays":2,"consolidationTerm":"Monthly","createdBy":null,"createdDtm":null,"updatedBy":null,"updatedDtm":null,"statusIndicator":null,"signatoryEmail":"tooot@gmail.com","leaseMlaNo":"OPM1","statusDescription":"APPROVED"},{"mlaNo":93,"lesseeId":108,"executionDate":"03/01/2017","signatoryInfo":"tess","overdueRate":5.77,"nonPaymentDays":2,"consolidationTerm":"Bi-Monthly","createdBy":null,"createdDtm":null,"updatedBy":null,"updatedDtm":null,"statusIndicator":null,"signatoryEmail":"xyz@gmail.com","leaseMlaNo":"OPM2","statusDescription":"APPROVED"}]};

const result = data.mlaList.map((o, index) => o.signatoryEmail); // in react <div key={index}>{o.signatoryEmail}</div> for example

console.log(result);