javascript - 如何找出数组中相似的对象 - React JS

标签 javascript arrays reactjs

我见过关于重复对象的类似问题。

我的 json 输出:

{    "coupons": [
        {
            "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": ""
        },
        {
            "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": ""
        },
        {
            "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": ""
        }
]
}

每个对象都有一个 buy_id 字段。 buy_id 显示对象是相同的,我应该将它们打印在 html 表格的一行中。

例如,第一个对象和第二个对象是相同的,具体取决于 buy_id 我将它们打印在行内。输出:

---------
title1 - title2 //because the first object and second object have same `buy_id`
---------
title3
---------
title4

我应该使用两个 map 吗?

我应该在 render 函数的 return 中使用此场景。

最佳答案

我为此押注于reduce

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

以下代码片段将按 buy_id 对您的对象进行分组,然后您可以轻松渲染它们

const data = {    "coupons": [
        {
            "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": ""
        },
        {
            "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": ""
        },
        {
            "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": ""
        }
]
};


const reducedData = data.coupons.reduce((accumulator, value) => {
  accumulator[value.buy_id] = accumulator[value.buy_id] || [];
  accumulator[value.buy_id].push(value);
  return accumulator;
}, {});

console.log(reducedData);

关于javascript - 如何找出数组中相似的对象 - React JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49728122/

相关文章:

javascript - 如何在 tone.js 中为正在播放的音符添加事件监听器

javascript - 按钮上的 overCls 在 ExtJS 中不起作用

javascript - 根据容器内的图像动态调整容器 DIV 的大小

c++ - 在本地 spoj 上的 "Edit distance"中声明二维数组会产生运行时错误?

node.js - 如何在Socket.io客户端中丢弃传入事件

javascript - page.evaluate 对比。 Puppeteer $ 方法

ios - 将 swift 数组解析为有效的 json

java - 如何以逗号分割字符串但保留空格?

reactjs - react : Nested defaultProps deep merge

reactjs - React-modal 用于动态显示图像