如何迭代返回函数内的数组数组 - reactjs

时间：2018-04-09 11:22:35

标签： javascript reactjs

我有这样的json响应：

[
  "5ac9b249970c2": [
    {
      "id": "376363",
      "price": "14400",
      "date": "2018-04-08 10:40:17",
      "user_id": "16433",
      "ip": "46.225.123.235",
      "code": "5ac9b249a0cc5",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "20821",
      "coupon_parent": "20821",
      "coupon_code": "195_2484C1_9873(7531)",
      "coupon_code_user": "7531",
      "coupon_code_partner": "195_2484C1_9873",
      "shop_id": "2484",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2018-03-24 05:05:05",
      "cradit_end_date": "2018-04-22 05:05:05",
      "expired": "0",
      "pay_data": null,
      "seri": "C",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "5ac9b249970c2",
      "coupon_property_id": "0",
      "title": "title1",
      "coupon_property_title": "",
      "parent_title": ""
    },
    {
      "id": "376362",
      "price": "14400",
      "date": "2018-04-08 10:40:17",
      "user_id": "16433",
      "ip": "46.225.123.235",
      "code": "5ac9b24997103",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "20821",
      "coupon_parent": "20821",
      "coupon_code": "194_2484C1_9779(4478)",
      "coupon_code_user": "4478",
      "coupon_code_partner": "194_2484C1_9779",
      "shop_id": "2484",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2018-03-24 05:05:05",
      "cradit_end_date": "2018-04-22 05:05:05",
      "expired": "0",
      "pay_data": null,
      "seri": "C",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "5ac9b249970c2",
      "coupon_property_id": "0",
      "title": "title2",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ],
  "58be5d6fd71c6": [
    {
      "id": "341459",
      "price": "27000",
      "date": "2017-03-07 10:42:47",
      "user_id": "16433",
      "ip": "46.225.76.21",
      "code": "58be5d6fd7214",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "19457",
      "coupon_parent": "19457",
      "coupon_code": "7_1310B1_2389(3386)",
      "coupon_code_user": "3386",
      "coupon_code_partner": "7_1310B1_2389",
      "shop_id": "1310",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2017-01-16 05:05:05",
      "cradit_end_date": "2017-03-19 05:05:05",
      "expired": "11",
      "pay_data": null,
      "seri": "B",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "58be5d6fd71c6",
      "coupon_property_id": "0",
      "title": "title3",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ],
  "58be5b964b1a1": [
    {
      "id": "341456",
      "price": "11250",
      "date": "2017-03-07 10:34:54",
      "user_id": "16433",
      "ip": "46.225.76.21",
      "code": "58be5b964bf1d",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "19724",
      "coupon_parent": "19724",
      "coupon_code": "16_2129A1_2178(4663)",
      "coupon_code_user": "4663",
      "coupon_code_partner": "16_2129A1_2178",
      "shop_id": "2129",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2017-03-05 05:05:05",
      "cradit_end_date": "2017-05-05 05:05:05",
      "expired": "11",
      "pay_data": null,
      "seri": "A",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "58be5b964b1a1",
      "coupon_property_id": "0",
      "title": "title4",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ]
]

我想打印返回功能中每个项目的标题。

render()
return(
???
)
}

我想在桌子上打印它们：

title 1 - title 2 //because first key has two object.
--------
title3
--------
title4

3 个答案:

答案 0 :(得分：1)

您的结构无效，您将拥有包含键的对象，该键具有对象数组。但是，你会有一个像

这样的嵌套地图 
data = {
  "5ac9b249970c2": [
    {
      "id": "376363",
      "price": "14400",
      "date": "2018-04-08 10:40:17",
      "user_id": "16433",
      "ip": "46.225.123.235",
      "code": "5ac9b249a0cc5",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "20821",
      "coupon_parent": "20821",
      "coupon_code": "195_2484C1_9873(7531)",
      "coupon_code_user": "7531",
      "coupon_code_partner": "195_2484C1_9873",
      "shop_id": "2484",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2018-03-24 05:05:05",
      "cradit_end_date": "2018-04-22 05:05:05",
      "expired": "0",
      "pay_data": null,
      "seri": "C",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "5ac9b249970c2",
      "coupon_property_id": "0",
      "title": "title1",
      "coupon_property_title": "",
      "parent_title": ""
    },
    {
      "id": "376362",
      "price": "14400",
      "date": "2018-04-08 10:40:17",
      "user_id": "16433",
      "ip": "46.225.123.235",
      "code": "5ac9b24997103",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "20821",
      "coupon_parent": "20821",
      "coupon_code": "194_2484C1_9779(4478)",
      "coupon_code_user": "4478",
      "coupon_code_partner": "194_2484C1_9779",
      "shop_id": "2484",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2018-03-24 05:05:05",
      "cradit_end_date": "2018-04-22 05:05:05",
      "expired": "0",
      "pay_data": null,
      "seri": "C",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "5ac9b249970c2",
      "coupon_property_id": "0",
      "title": "title2",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ],
  "58be5d6fd71c6": [
    {
      "id": "341459",
      "price": "27000",
      "date": "2017-03-07 10:42:47",
      "user_id": "16433",
      "ip": "46.225.76.21",
      "code": "58be5d6fd7214",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "19457",
      "coupon_parent": "19457",
      "coupon_code": "7_1310B1_2389(3386)",
      "coupon_code_user": "3386",
      "coupon_code_partner": "7_1310B1_2389",
      "shop_id": "1310",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2017-01-16 05:05:05",
      "cradit_end_date": "2017-03-19 05:05:05",
      "expired": "11",
      "pay_data": null,
      "seri": "B",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "58be5d6fd71c6",
      "coupon_property_id": "0",
      "title": "title3",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ],
  "58be5b964b1a1": [
    {
      "id": "341456",
      "price": "11250",
      "date": "2017-03-07 10:34:54",
      "user_id": "16433",
      "ip": "46.225.76.21",
      "code": "58be5b964bf1d",
      "succ": "1",
      "admin_seen": "1",
      "user_seen": "0",
      "coupon_id": "19724",
      "coupon_parent": "19724",
      "coupon_code": "16_2129A1_2178(4663)",
      "coupon_code_user": "4663",
      "coupon_code_partner": "16_2129A1_2178",
      "shop_id": "2129",
      "payment_type": "7",
      "merchent_type": "3",
      "merchent_id": "0",
      "cradit_start_date": "2017-03-05 05:05:05",
      "cradit_end_date": "2017-05-05 05:05:05",
      "expired": "11",
      "pay_data": null,
      "seri": "A",
      "to_friend": "0",
      "finance_id": "0",
      "app": "web",
      "expire_date": "0000-00-00 00:00:00",
      "expire_app": "",
      "buy_id": "58be5b964b1a1",
      "coupon_property_id": "0",
      "title": "title4",
      "coupon_property_title": "",
      "parent_title": ""
    }
  ]
}

render() {
   <div>
       {Object.keys(data).map(obj => {
          return (
              <tr>
                  {obj.map(item => <td>{/* data and item */}</td>)}
              </tr>   
          )
       })}
   </div>
}

答案 1 :(得分：0)

这是你的代码，男：

function ShowTitles(jsonData){
    Object.values(jsonData).map(line=>line.map(element=>element.title).join(" - "))
}

render(){
    return ShowTitles(jsonData);
}

答案 2 :(得分：0)

尝试这样，将json字符串转换为typescript中的javascript对象，然后使用foreach，如下面的代码所示

   var someString: string = "your JSON String here";
   var jsonObject : any = JSON.parse(someString)

   const titles=[];
   jsonObject.forEach(ele=> {
     ele.forEach(e=> titles.push(e.title))
   });
   console.log(titles);
相关问题
最新问题