时间戳

首页 > 解决方案 > 减少嵌套数组

reactjs - 减少嵌套数组

问题描述

我从后端收到这个 JSON，我需要计算“concrete_compressive_cylinder_100”的数量，其中pick_up = false

具体样本（每个工单可以是多个）可以为空（密钥始终存在）

样本样本（每个具体样本 1 个）可以为空（密钥始终存在）

concrete_compressive_cylinder_100（每个 sample_specimens 为 500 为空）

{ 
   "uuid":"4ad7bfe1-48d6-488c-bfaf-33f7189a41d7",
   "org_workorder_id":1000,
   "concrete_samples":[ 
      { 
         "uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
         "workorder_uuid":"4ad7bfe1-48d6-488c-bfaf-33f7189a41d7",
         "org_sample_id":5001,
         "sample_specimens":{ 
            "concrete_compressive_cylinder_100":[ 
               { 
                  "uuid":"b9ef3a8a-2945-41e6-a34d-d90d1bd64819",
                  "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                  "picked_up":true
               },
               { 
                  "uuid":"d43f15b3-2208-43de-8fff-8d237c6918f9",
                  "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                  "picked_up":true
               },
               { 
                  "uuid":"472f832a-6f07-4af6-97ea-e6dc7b9b3799",
                  "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                  "picked_up":true
               }
            ],
            "concrete_compressive_cylinder_200":[ 
                { 
                   "uuid":"d659d058-e4ec-4f72-9d73-9ea98295715a",
                   "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                   "picked_up":true
                },
                { 
                   "uuid":"777372e0-3e58-4292-bae4-bec84dfe1402",
                   "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                   "picked_up":true
                },
                { 
                   "uuid":"f63f7102-7673-4e71-97e5-2d85e0c1a93d",
                   "sample_uuid":"776a8ccb-82fd-4a42-a6eb-8f286a4a9c0b",
                   "picked_up":true
                }
             ]
         }
      },
      { 
         "uuid":"61138cf3-0c49-4495-8a89-533c0a6e50bc",
         "workorder_uuid":"4ad7bfe1-48d6-488c-bfaf-33f7189a41d7",
         "org_sample_id":5002,
         "sample_specimens":{ 
            "concrete_compressive_cylinder_100":null,
            "concrete_compressive_cylinder_200":null
         }
      }
   ]
}

我已经走了这么远，但它并没有真正起作用，现在我更困惑了，一些指导会很棒

        const out = res.data.concrete_samples.reduce((acc, sample) => {
          const { sample_specimens } = sample;
          const concrete_compressive_cylinder_100 = Object.keys(sample_specimens)["concrete_compressive_cylinder_100"];

            const specimens = concrete_compressive_cylinder_100.map(obj => {
                obj.picked_up ? console.log("picked up") : console.log("Not pickedn up")
            });

        }, []);

标签： reactjsecmascript-6

解决方案

Array.prototype.reduce接受一个函数，该函数的返回值最终从reduce自身返回。该函数将传递数组的每个元素以及到目前为止累积的值。例如，

[1, 2, 3].reduce((accumulator, element) => accumulator + element)
// => 6

您还可以提供一个初始值，该值将accumulator在第一次迭代时传递给您的函数。

在基本层面上，要计算具有特定属性的对象的出现次数reduce，您可以使用类似这样的东西，

let array = [
  { foo: 4 },
  { foo: 6 },
  { bar: 8 },
]

array.reduce((count, element) => {
  if (element.foo !== undefined) {
    return count + 1
  } else {
    return count
  }
}, 0)
// => 2

将此扩展到您的代码（省略了无关数据），并使用嵌套reduce来获取具有所需picked_up属性的柱面数，

const data = {
  "concrete_samples":[ 
    {
      "sample_specimens":{ 
        "concrete_compressive_cylinder_100":[ 
          {
            "picked_up":true
          },
          {
             "picked_up":true
          },
          {
             "picked_up":true
          }
        ],
        "concrete_compressive_cylinder_200":[ 
          {
             "picked_up":true
          },
          {
             "picked_up":true
          },
          {
             "picked_up":true
          }
        ]
      }
    },
    {
      "sample_specimens":{ 
        "concrete_compressive_cylinder_100":null,
        "concrete_compressive_cylinder_200":null
      }
    }
  ]
}

const result = data.concrete_samples.reduce((count, sample) => {
  const cylinders = sample.sample_specimens.concrete_compressive_cylinder_100
  if (cylinders == null) {
    return count
  }
  const samplePickedUpCount = cylinders.reduce((pickedUpCount, cylinder) => {
    if (cylinder.picked_up) {
      return pickedUpCount + 1
    } else {
      return pickedUpCount
    }
  }, 0)
  return count + samplePickedUpCount
}, 0)

console.log(result)

您也可以使用Array.prototype.filter来完成同样的事情，获取具有所需属性的圆柱数组，并获取该数组的长度。

推荐阅读