如何将一组对象（不同长度）转换为一个具有与原始数组中元素不同属性的对象？

Question

我正在尝试制作一个使用来自 flickr api 的数据的应用程序（我将只使用开放许可证图像并注明作者等）。我正在查询 flickr api，然后将结果解析为关于我正在搜索的每个项目的一行。基本上，我希望每一行都有我要搜索的东西的名称，然后是图片链接 + 图片作者，如下所示：

但是由于 api 结果不同（有时 flickr 在结果中给我 1 张图像，有时有数百张），我想不出一种优雅的方式将对象数组转换为一个对象。我基本上是在做从行到列的转置。因为数组长度不同，我最终使用了一堆可怕的if else 子句来完成这项工作。

// slicing the first 5 elements from flickr results
let first5elements = data.photos.photo.slice(0, 5);

let photos_with_query = [];

if (first5elements.length === 0) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 1) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 2) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 3) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 4) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
    image_4: first5elements[3].url_c,
    image_author_4: first5elements[3].pathalias,
  };

  console.log(onerowforecoregions);
  photos_with_query.push(onerowforecoregions);
} else if (first5elements.length === 5) {
  let onerowforecoregions = {
    region_name: ecoregion.us_l4name,
    image_1: first5elements[0].url_c,
    image_author_1: first5elements[0].pathalias,
    image_2: first5elements[1].url_c,
    image_author_2: first5elements[1].pathalias,
    image_3: first5elements[2].url_c,
    image_author_3: first5elements[2].pathalias,
    image_4: first5elements[3].url_c,
    image_author_4: first5elements[3].pathalias,
    image_5: first5elements[4].url_c,
    image_author_5: first5elements[4].pathalias,
  };

  photos_with_query.push(onerowforecoregions);
}

这确实有效......但它远非你所能得到的优雅。所以我想知道是否有一种方法可以获取一组对象并将其转换为一个具有原始对象属性的多个属性的对象。它会自动拉出 image_1、image_10 等的东西吗？

Answer 1

将first5Elements 中的每个项目映射到一个条目数组，获取被迭代项目的索引以确定键。例如，如果输入数组只包含

{ url: { c: 'url' }, pathalias: 'path' }

可以转化为词条

[['image_1', 'url'], ['image_author_1', 'path']]

使用flatMap 和Object.fromEntries，您可以简洁地将其转换为您想要的对象：

const first5elements = data.photos.photo.slice(0, 5);
const entries = first5elements.flatMap(
    (item, i) => [
        ['image_' + (i + 1), item.url.c],
        ['image_author_' + (i + 1), item.pathalias]
    ]
);
const photos_with_query = [
    { region_name: ecoregion.us_l4name, ...Object.fromEntries(entries) }
];

直播sn-p：

const first5elements = [{ url: { c: 'url' }, pathalias: 'path' }];
const entries = first5elements.flatMap(
    (item, i) => [
        ['image_' + (i + 1), item.url.c],
        ['image_author_' + (i + 1), item.pathalias]
    ]
);
const photos_with_query = [
    { region_name: 'ecoregion.us_l4name', ...Object.fromEntries(entries) }
];
console.log(photos_with_query);