使用.map迭代对象以显示内部数组值 [英] Iterating an Object using .map to display the inner array values

问题描述

我有一个JSON 字符串化对象，如下:

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": "[e-mail]",
    "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": "[e-mail]",
    "leaseMlaNo": "OPM2",
    "statusDescription": "APPROVED"
  }]
}

我在Reactjs中工作，我希望对我的对象进行迭代，以便对对象的内部数组 mlaList 进行迭代以依次显示值. 每当我尝试对父对象使用.map函数时，都会出现错误消息".map不是函数"，这是我尝试失败的迭代:

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})}

我提到的SO问题与这一问题非常相似，但是他们只是在谈论使用Object.keys迭代对象.

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

推荐答案

方法

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":"[e-mail]","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":"[e-mail]","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);

这篇关于使用.map迭代对象以显示内部数组值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！