从javascript中的对象中选择特定元素答案

【问题标题】：Select specific elements from object in javascript从javascript中的对象中选择特定元素
【发布时间】：2021-12-21 16:13:24
【问题描述】：

我有这个对象，其中包含有关照片的信息，包括有关其裁剪的详细信息。

{
  "images": [
    {
      "key": "ASDV1-01.jpg",
      "image_location": "image1.jpg",
      "data": {
        "documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
        "scandate": "Feb  1 2018 12:05PM",
        "F08": "1",
        "F09": "",
        "F10": "101076",
        "F11": ""
      },
      "crops": {
        "F08": {
          "rectangle": {
            "left": 690,
            "top": 2111,
            "width": 597,
            "height": 121
          }
        },
        "F09": {},
        "F10": {
          "rectangle": {
            "left": 653,
            "top": 821,
            "width": 653,
            "height": 243
          }
        },
        "F11": {}
      }
    },
    {
      "key": "ASDV1-01.jpg",
      "image_location": "image.png",
      "crops": {
        "F05": {
          "rectangle": {
            "left": 0,
            "top": 808,
            "width": 624,
            "height": 243
          }
        }
      },
      "metadata": [
        {
          "name": "colors",
          "data": {
            "dimensions": {
              "width": 2000,
              "height": 2600
            },
            "coordinates": {
              "width": {
                "x": {
                  "lat": 4,
                  "long": [12, 345]
                },
                "y": {
                  "lat": {
                    "x" : [12,345],
                    "y": "234"
                  },
                  "long": 123
                }
              }
            }
          }
        }
      ]
    },
    {
      "key": "ASDV1-02.jpg",
      "image_location": "image.png"
    }
  ]
}

我想返回以下输出：

"F02":
                    {
                        "left": 690,
                        "top": 2111,
                        "width": 597,
                        "height": 121
                    }

更准确地说，我想返回一个包含该对象中所有作物对象的新对象。或者一个新的数组，不管它是什么。尝试使用过滤器方法执行此操作，但没有用。提前谢谢你。

【问题讨论】：

原始对象中没有F02。
obj.images.map(image => image.crops)

标签： javascript arrays json object oop

【解决方案1】：

Array filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

如果对象不具有crops 属性，则使用过滤器将从数组中排除该元素。

如果您想包含没有crops 的对象，map() 方法可能是更好的选择。

如果您确实想捕获特定键，可以使用下面定义的 findKey 函数的变体。

var obj = {
  "images": [
    {
      "key": "ASDV1-01.jpg",
      "image_location": "image1.jpg",
      "data": {
        "documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
        "scandate": "Feb  1 2018 12:05PM",
        "F08": "1",
        "F09": "",
        "F10": "101076",
        "F11": ""
      },
      "crops": {
        "F08": {
          "rectangle": {
            "left": 690,
            "top": 2111,
            "width": 597,
            "height": 121
          }
        },
        "F09": {},
        "F10": {
          "rectangle": {
            "left": 653,
            "top": 821,
            "width": 653,
            "height": 243
          }
        },
        "F11": {}
      }
    },
    {
      "key": "ASDV1-01.jpg",
      "image_location": "image.png",
      "crops": {
        "F05": {
          "rectangle": {
            "left": 0,
            "top": 808,
            "width": 624,
            "height": 243
          }
        }
      },
      "metadata": [
        {
          "name": "colors",
          "data": {
            "dimensions": {
              "width": 2000,
              "height": 2600
            },
            "coordinates": {
              "width": {
                "x": {
                  "lat": 4,
                  "long": [12, 345]
                },
                "y": {
                  "lat": {
                    "x" : [12,345],
                    "y": "234"
                  },
                  "long": 123
                }
              }
            }
          }
        }
      ]
    },
    {
      "key": "ASDV1-02.jpg",
      "image_location": "image.png"
    }
  ]
};


obj.images.filter(image => image.crops);
/***
returns an array with crops if they exist.

[
    {
        "key": "ASDV1-01.jpg",
        "image_location": "image1.jpg",
        "data": {
            "documentid": "CE44DBAC-59B2-4178-8392-0141FB2F58DF",
            "scandate": "Feb  1 2018 12:05PM",
            "F08": "1",
            "F09": "",
            "F10": "101076",
            "F11": ""
        },
        "crops": {
            "F08": {
                "rectangle": {
                    "left": 690,
                    "top": 2111,
                    "width": 597,
                    "height": 121
                }
            },
            "F09": {},
            "F10": {
                "rectangle": {
                    "left": 653,
                    "top": 821,
                    "width": 653,
                    "height": 243
                }
            },
            "F11": {}
        }
    },
    {
        "key": "ASDV1-01.jpg",
        "image_location": "image.png",
        "crops": {
            "F05": {
                "rectangle": {
                    "left": 0,
                    "top": 808,
                    "width": 624,
                    "height": 243
                }
            }
        },
        "metadata": [
            {
                "name": "colors",
                "data": {
                    "dimensions": {
                        "width": 2000,
                        "height": 2600
                    },
                    "coordinates": {
                        "width": {
                            "x": {
                                "lat": 4,
                                "long": [
                                    12,
                                    345
                                ]
                            },
                            "y": {
                                "lat": {
                                    "x": [
                                        12,
                                        345
                                    ],
                                    "y": "234"
                                },
                                "long": 123
                            }
                        }
                    }
                }
            }
        ]
    }
]
*/

function findKey(group, key) {
return group.images
    .filter(item => item.crops)
    .filter(item => item.crops[key])
    .map(item => item.crops[key])
    .reduce((a,b) => Object.assign(a,b), {});
}

【讨论】：