堆栈内存溢出
  简体   繁体   English

ReactJS 如何从 arrays 阵列更改为单个阵列

[英]ReactJS How to change from array of arrays to one single array

 原文  2020-08-11 20:03:33  4   4    javascript/ reactjs

问题描述

My problem is that i have that Array:我的问题是我有那个数组：

 [
   {
      "_id":"5f32f3d98fe32813803d32e3",
      "StartdateFormatPL":"11.08.2020, 01:30:00",
      "EndDateFormatPL":"11.08.2020, 02:00:00",
      "Hours":[
         {
            "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
            "hour":"11.08.2020, 01:30:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
            "hour":"11.08.2020, 01:35:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
            "hour":"11.08.2020, 01:40:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
            "hour":"11.08.2020, 01:45:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
            "hour":"11.08.2020, 01:50:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ad23bc-1506-26da-c272-cfca177565a",
            "hour":"11.08.2020, 01:55:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   },
   {
      "_id":"5f32f60ecee0dd13987cf6a1",
      "StartdateFormatPL":"11.08.2020, 02:00:00",
      "EndDateFormatPL":"11.08.2020, 02:30:00",
      "Hours":[
         {
            "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
            "hour":"11.08.2020, 02:00:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"fdd2c8-67da-b517-7f85-8e2612f28",
            "hour":"11.08.2020, 02:05:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
            "hour":"11.08.2020, 02:10:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
            "hour":"11.08.2020, 02:15:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"b2c78-358-6176-666-862bacec408",
            "hour":"11.08.2020, 02:20:00",
            "isBooked":false,
            "isConfirmed":false
         },
         {
            "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
            "hour":"11.08.2020, 02:25:00",
            "isBooked":false,
            "isConfirmed":false
         }
      ],
      "__v":0
   }
]

This is the response from my API.这是我的 API 的回复。 There are two separate objects which contain Hours Array .有两个单独的对象包含Hours Array 。 In short this is an Array and I wonder how I can convert it to one single array connecting them both into one.简而言之，这是一个数组，我想知道如何将它转换为一个数组，将它们连接成一个数组。 I am using ReactJS and I will have many arrays not just only two and I want to connect them into single one..我正在使用 ReactJS 我将有很多 arrays 不仅仅是两个，我想将它们连接成一个..

Summing up [Array] = {... [Array1]...} {... [Array2]...] and finnally getting Object of: [{ Array1 + Array2....}]总结 [Array] = {... [Array1]...} {... [Array2]...] 并最终得到 Object of: [{ Array1 + Array2....}]

Thanks in advance for help.提前感谢您的帮助。

Expected Result:预期结果：

"Hours":[
             {
                "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f",
                "hour":"11.08.2020, 01:30:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875",
                "hour":"11.08.2020, 01:35:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15",
                "hour":"11.08.2020, 01:40:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15",
                "hour":"11.08.2020, 01:45:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"2475ddf-e6ee-6df7-d22d-860e8a31053",
                "hour":"11.08.2020, 01:50:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ad23bc-1506-26da-c272-cfca177565a",
                "hour":"11.08.2020, 01:55:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"e2bbb4-615e-7aad-0bfd-c7156c5426",
                "hour":"11.08.2020, 02:00:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"fdd2c8-67da-b517-7f85-8e2612f28",
                "hour":"11.08.2020, 02:05:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5befec6-2a2d-13b2-324d-cd7e86a7626",
                "hour":"11.08.2020, 02:10:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37",
                "hour":"11.08.2020, 02:15:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"b2c78-358-6176-666-862bacec408",
                "hour":"11.08.2020, 02:20:00",
                "isBooked":false,
                "isConfirmed":false
             },
             {
                "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f",
                "hour":"11.08.2020, 02:25:00",
                "isBooked":false,
                "isConfirmed":false
             }
          ],
          "__v":0
       }
    ]

4 个解决方案

解决方案1
 1 已采纳  2020-08-11 20:14:30

data.flatMap(({ Hours }) => Hours);

Map the data to arrays of Hours then flatten. Map 数据到 arrays 的Hours然后展平。

flatMap 平面图

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. flatMap()方法首先使用映射 function 映射每个元素，然后将结果展平为新数组。 It is identical to a map() followed by a flat() of depth 1, but flatMap() is often quite useful, as merging both into one method is slightly more efficient.它与map()后跟一个深度为 1 的flat()相同，但flatMap()通常非常有用，因为将两者合并到一个方法中会稍微更有效率。 

 const data = [ { _id: "5f32f3d98fe32813803d32e3", StartdateFormatPL: "11.08.2020, 01:30:00", EndDateFormatPL: "11.08.2020, 02:00:00", Hours: [ { id: "f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f", hour: "11.08.2020, 01:30:00", isBooked: false, isConfirmed: false }, { id: "d8cfbd6-148a-8e0a-41d4-614d7fa6875", hour: "11.08.2020, 01:35:00", isBooked: false, isConfirmed: false }, { id: "2e71b4-dcb-fb01-1fa0-8eddc5cbd15", hour: "11.08.2020, 01:40:00", isBooked: false, isConfirmed: false }, { id: "cbe26f3-1af2-81a7-3c0b-8ec4be286f15", hour: "11.08.2020, 01:45:00", isBooked: false, isConfirmed: false }, { id: "2475ddf-e6ee-6df7-d22d-860e8a31053", hour: "11.08.2020, 01:50:00", isBooked: false, isConfirmed: false }, { id: "ad23bc-1506-26da-c272-cfca177565a", hour: "11.08.2020, 01:55:00", isBooked: false, isConfirmed: false } ], __v: 0 }, { _id: "5f32f60ecee0dd13987cf6a1", StartdateFormatPL: "11.08.2020, 02:00:00", EndDateFormatPL: "11.08.2020, 02:30:00", Hours: [ { id: "e2bbb4-615e-7aad-0bfd-c7156c5426", hour: "11.08.2020, 02:00:00", isBooked: false, isConfirmed: false }, { id: "fdd2c8-67da-b517-7f85-8e2612f28", hour: "11.08.2020, 02:05:00", isBooked: false, isConfirmed: false }, { id: "5befec6-2a2d-13b2-324d-cd7e86a7626", hour: "11.08.2020, 02:10:00", isBooked: false, isConfirmed: false }, { id: "5d6cb20-80ad-3e38-a7e7-aa5feb88d37", hour: "11.08.2020, 02:15:00", isBooked: false, isConfirmed: false }, { id: "b2c78-358-6176-666-862bacec408", hour: "11.08.2020, 02:20:00", isBooked: false, isConfirmed: false }, { id: "ef3f5e-b60b-18a1-ac13-8542d48dc28f", hour: "11.08.2020, 02:25:00", isBooked: false, isConfirmed: false } ], __v: 0 } ]; const hours = data.flatMap(({ Hours }) => Hours); console.log('hours', hours)

解决方案2
 0  2020-08-11 20:13:08

You could try with the map() method您可以尝试使用 map() 方法

 const data = [ { _id: "5f32f3d98fe32813803d32e3", StartdateFormatPL: "11.08.2020, 01:30:00", EndDateFormatPL: "11.08.2020, 02:00:00", Hours: [ { id: "f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f", hour: "11.08.2020, 01:30:00", isBooked: false, isConfirmed: false }, { id: "d8cfbd6-148a-8e0a-41d4-614d7fa6875", hour: "11.08.2020, 01:35:00", isBooked: false, isConfirmed: false }, { id: "2e71b4-dcb-fb01-1fa0-8eddc5cbd15", hour: "11.08.2020, 01:40:00", isBooked: false, isConfirmed: false }, { id: "cbe26f3-1af2-81a7-3c0b-8ec4be286f15", hour: "11.08.2020, 01:45:00", isBooked: false, isConfirmed: false }, { id: "2475ddf-e6ee-6df7-d22d-860e8a31053", hour: "11.08.2020, 01:50:00", isBooked: false, isConfirmed: false }, { id: "ad23bc-1506-26da-c272-cfca177565a", hour: "11.08.2020, 01:55:00", isBooked: false, isConfirmed: false } ], __v: 0 }, { _id: "5f32f60ecee0dd13987cf6a1", StartdateFormatPL: "11.08.2020, 02:00:00", EndDateFormatPL: "11.08.2020, 02:30:00", Hours: [ { id: "e2bbb4-615e-7aad-0bfd-c7156c5426", hour: "11.08.2020, 02:00:00", isBooked: false, isConfirmed: false }, { id: "fdd2c8-67da-b517-7f85-8e2612f28", hour: "11.08.2020, 02:05:00", isBooked: false, isConfirmed: false }, { id: "5befec6-2a2d-13b2-324d-cd7e86a7626", hour: "11.08.2020, 02:10:00", isBooked: false, isConfirmed: false }, { id: "5d6cb20-80ad-3e38-a7e7-aa5feb88d37", hour: "11.08.2020, 02:15:00", isBooked: false, isConfirmed: false }, { id: "b2c78-358-6176-666-862bacec408", hour: "11.08.2020, 02:20:00", isBooked: false, isConfirmed: false }, { id: "ef3f5e-b60b-18a1-ac13-8542d48dc28f", hour: "11.08.2020, 02:25:00", isBooked: false, isConfirmed: false } ], __v: 0 } ]; var hours = [] data.map(item =>item.Hours.map(h=>hours.push(h))); console.log(hours);

解决方案3
 0  2020-08-11 20:15:44

Try the following:尝试以下操作：

yourOuterArray.map(obj => obj["Hours"]).flat()

The flat array method is new, if your environment does not support it consider using Lodash or Underscore , both have flatten methods. flat array 方法是新的，如果您的环境不支持它考虑使用Lodash或Underscore ，两者都有 flatten 方法。

解决方案4
 0  2020-08-11 20:18:39

I believe a reducer would get the job done well - you can even use a simple push() if ES6 is not available in your environment我相信减速器可以很好地完成工作 - 如果您的环境中没有 ES6，您甚至可以使用简单的push() 

 const sample = [ { "_id":"5f32f3d98fe32813803d32e3", "StartdateFormatPL":"11.08.2020, 01:30:00", "EndDateFormatPL":"11.08.2020, 02:00:00", "Hours":[ { "id":"f1dcc-33f8-b32a-3aaa-7bb1b0fcaa6f", "hour":"11.08.2020, 01:30:00", "isBooked":false, "isConfirmed":false }, { "id":"d8cfbd6-148a-8e0a-41d4-614d7fa6875", "hour":"11.08.2020, 01:35:00", "isBooked":false, "isConfirmed":false }, { "id":"2e71b4-dcb-fb01-1fa0-8eddc5cbd15", "hour":"11.08.2020, 01:40:00", "isBooked":false, "isConfirmed":false }, { "id":"cbe26f3-1af2-81a7-3c0b-8ec4be286f15", "hour":"11.08.2020, 01:45:00", "isBooked":false, "isConfirmed":false }, { "id":"2475ddf-e6ee-6df7-d22d-860e8a31053", "hour":"11.08.2020, 01:50:00", "isBooked":false, "isConfirmed":false }, { "id":"ad23bc-1506-26da-c272-cfca177565a", "hour":"11.08.2020, 01:55:00", "isBooked":false, "isConfirmed":false } ], "__v":0 }, { "_id":"5f32f60ecee0dd13987cf6a1", "StartdateFormatPL":"11.08.2020, 02:00:00", "EndDateFormatPL":"11.08.2020, 02:30:00", "Hours":[ { "id":"e2bbb4-615e-7aad-0bfd-c7156c5426", "hour":"11.08.2020, 02:00:00", "isBooked":false, "isConfirmed":false }, { "id":"fdd2c8-67da-b517-7f85-8e2612f28", "hour":"11.08.2020, 02:05:00", "isBooked":false, "isConfirmed":false }, { "id":"5befec6-2a2d-13b2-324d-cd7e86a7626", "hour":"11.08.2020, 02:10:00", "isBooked":false, "isConfirmed":false }, { "id":"5d6cb20-80ad-3e38-a7e7-aa5feb88d37", "hour":"11.08.2020, 02:15:00", "isBooked":false, "isConfirmed":false }, { "id":"b2c78-358-6176-666-862bacec408", "hour":"11.08.2020, 02:20:00", "isBooked":false, "isConfirmed":false }, { "id":"ef3f5e-b60b-18a1-ac13-8542d48dc28f", "hour":"11.08.2020, 02:25:00", "isBooked":false, "isConfirmed":false } ], "__v":0 } ] const result = sample.reduce((accum, entry) => { return [...accum, ...entry["Hours"] ] }, []) console.log("Result", result)

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将多个 arrays 中的值存储到一个数组中 (JavaScript/Reactjs) - Store values from multiple arrays into one array (JavaScript/Reactjs) 在一个阵列中添加 arrays - Add arrays in one single array 关于将数组数组映射到一个单个数组的问题 - Issue on Mapping Array of Arrays to one Single Array 如何更改 reactjs 中映射数组中唯一一项的图标？ - How to change the icon of only one particular item of mapped array in reactjs? 从 ReactJS 中的 object 属性创建 arrays 数组 - Create array of arrays from object properties in ReactJS Vue 如何将嵌套的 arrays 合并为一个数组 - Vue how to merge nested arrays into one single array 在reactjs中循环数组数组 - Loop on array of arrays in reactjs ReactJS - 如何使用 id 从数组中渲染单个 object？ - ReactJS - How to render single object from an array using id? 如何在ReactJS中使用数组数组呈现表？ - How to render tables using an array of arrays in ReactJS? 将 arrays 数组转换成一个带有 \n 的字符串 - Array of arrays into one single string with \n
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM