Question

我有一个包含嵌套对象和数组的对象，其结构类似于以下示例：

{
  "5-1980": [
    {
      "memID": "180",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    },
    {
      "memID": "180",
      "memType": "Movie",
      "date": {
        "month": 5,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    }
  ],
  "6-1980": [
    {
      "memID": "65",
      "memType": "Game",
      "date": {
        "month": 6,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [],
      "tvshow": [],
      "game": [
        {
          "boxArt": "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
        }
      ]
    }
  ],
  "7-1980": [
    {
      "memID": "178",
      "memType": "Movie",
      "date": {
        "month": 7,
        "year": 1980
      },
      "favourite": null,
      "public": null,
      "music": [],
      "movie": [
        {
          "poster": "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
        }
      ],
      "tvshow": [],
      "game": []
    }
  ]
}

我不知道如何访问对象中的值，特别是URL，以便可以使用它们来呈现图像。以上面的数据为例，我想访问嵌套在对象内的四个URL，以便可以按以下方式显示分组为数组的图像：

  [
    5-1980: [
      URL 1,
      URL 2
    ],
    6-1980: [
      URL 1
    ],  
    7-1980: [
     URL 1
    ]
  ]

目前，我可以使用Object.keys(data).map((data, i) =>为每个月-年组渲染一个元素，但是后来我不知道如何访问每个与元素相关的图像URL。

由于URL根据memType嵌套在不同的数组中，因此我知道我需要构造一些if语句，但是我无法弄清楚如何访问其中的每个对象与每个月-年组关联的数组旁边。

Answer 1

您可以使用Object.entries和array.flatMap遍历URL，并返回并展平URL的中间结果数组。在这些值中，指定要从嵌套属性中解构和映射的键。

Object.entries(data).flatMap(([key, value]) => [
  key,
  ...value.flatMap(({ game, movie }) => [
    ...movie.map(({ poster }) => `->${poster}`),
    ...game.map(({ boxArt }) => `->${boxArt}`),
    // spread in any other sub-category arrays with URLs
  ])
]);

const data = {
  "5-1980": [
    {
      memID: "180",
      memType: "Movie",
      date: {
        month: 5,
        year: 1980
      },
      favourite: null,
      public: null,
      music: [],
      movie: [
        {
          poster:
            "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      tvshow: [],
      game: []
    },
    {
      memID: "180",
      memType: "Movie",
      date: {
        month: 5,
        year: 1980
      },
      favourite: null,
      public: null,
      music: [],
      movie: [
        {
          poster:
            "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
        }
      ],
      tvshow: [],
      game: []
    }
  ],
  "6-1980": [
    {
      memID: "65",
      memType: "Game",
      date: {
        month: 6,
        year: 1980
      },
      favourite: null,
      public: null,
      music: [],
      movie: [],
      tvshow: [],
      game: [
        {
          boxArt: "https://images.igdb.com/igdb/image/upload/t_1080p/co1hvj.jpg"
        }
      ]
    }
  ],
  "7-1980": [
    {
      memID: "178",
      memType: "Movie",
      date: {
        month: 7,
        year: 1980
      },
      favourite: null,
      public: null,
      music: [],
      movie: [
        {
          poster:
            "https://image.tmdb.org/t/p/original//5xcXvTErivIgRchsaw9qaT3NflE.jpg"
        }
      ],
      tvshow: [],
      game: []
    }
  ]
};

const value = Object.entries(data).flatMap(([key, value]) => [
  key,
  ...value.flatMap(({ game, movie }) => [
    ...movie.map(({ poster }) => `-> ${poster}`),
    ...game.map(({ boxArt }) => `-> ${boxArt}`)
  ])
]);

console.log(value);

访问复杂的数组对象内部的深层嵌套值

1 个答案: