如何使用reduce合并JavaScript对象数组?

时间:2019-02-27 05:23:35

标签: javascript ecmascript-6

关于合并javaScript数组对象的文章很多,相对于我的问题,大多数情况是合并2个数组的情况不同。

我从API中获取了JSON,因此我对其进行了映射和过滤,因为我只需要'标签'

这是我的代码:

JSON.map((key) => (key.tags))
.filter(function (element) {
    return element !== undefined;
})

这是我的结果:

   [ 
      { 
    "web_devt": { 
      "item_id": "858850847", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "web_devt": { 
      "item_id": "1004644524", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "pdo": { 
      "item_id": "1056300113", 
      "tag": "pdo" 
    }, 
    "php": { 
      "item_id": "1056300113", 
      "tag": "php" 
    }, 
    "web_devt": { 
      "item_id": "1056300113", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "parallax scrolling": { 
      "item_id": "1087678088", 
      "tag": "parallax scrolling" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2435593852", 
      "tag": "react" 
    } 
  }, 
  { 
    "javascript": { 
      "item_id": "2435595088", 
      "tag": "javascript" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2465629468", 
      "tag": "react" 
    } 
  } 
] 

我想像这样合并它们:

[
{
"web_devt": [
    item_id: "765558416", 
        item_id: "765558416",
        item_id: "765558416",
        ...]
},
 {
"react": [
    item_id: "765558416",
    item_id: "765558416",
    item_id: "765558416",
    ...]
},
{
"JavaScipt": [
    item_id: "765558416",
    item_id: "765558416",
    item_id: "765558416",
    ...]
}

]

等... 基本上所有相同的标签将合并 您如何在reduce或任何解决方案中做到这一点,而又不能在loadash或任何第三方中做到这一点?

3 个答案:

答案 0 :(得分:2)

您所需的输出语法无效。您不能拥有带有键的数组,也不能拥有带有多个具有相同名称的键的对象。

但是,如果要使用id数组,则可以使用reduce并将数据分组,对于单个项目,请使用Object.entries获取对象中的键和值。

var data = [ 
  { 
    "web_devt": { 
      "item_id": "858850847", 
      "tag": "web_devt" 
  } 
  }, 
  { 
    "web_devt": { 
      "item_id": "1004644524", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "pdo": { 
      "item_id": "1056300113", 
      "tag": "pdo" 
    }, 
    "php": { 
      "item_id": "1056300113", 
      "tag": "php" 
    }, 
    "web_devt": { 
      "item_id": "1056300113", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "parallax scrolling": { 
      "item_id": "1087678088", 
      "tag": "parallax scrolling" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2435593852", 
      "tag": "react" 
    } 
  }, 
  { 
    "javascript": { 
      "item_id": "2435595088", 
      "tag": "javascript" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2465629468", 
      "tag": "react" 
    } 
  } 
] 

const res = data.reduce((acc, item) => {
  Object.entries(item).forEach((attr) => {
    const [key,value] = attr;
    if(value.tag !== undefined) {
      if (acc[key]){
        acc[key].push(value.item_id);
      }
      else {
        acc[key] = [value.item_id];
      }
    }
  });
  
  return acc;
}, {})
console.log(res);

答案 1 :(得分:1)

假设内部数组旨在包含对象,请使用.reduce将输入对象分组为由item_id索引的对象,然后使用Object.entries将该对象转换为数组:

const input = [ { 
    "web_devt": { 
      "item_id": "858850847",
      "tag": "web_devt" 
    } 
  },  
  { 
    "web_devt": { 
      "item_id": "1004644524",
      "tag": "web_devt" 
    } 
  },  
  { 
    "pdo": { 
      "item_id": "1056300113",
      "tag": "pdo" 
    },
     
    "php": { 
      "item_id": "1056300113",
      "tag": "php" 
    },
     
    "web_devt": { 
      "item_id": "1056300113",
      "tag": "web_devt" 
    } 
  },  
  { 
    "parallax scrolling": { 
      "item_id": "1087678088",
      "tag": "parallax scrolling" 
    } 
  },  
  { 
    "react": { 
      "item_id": "2435593852",
      "tag": "react" 
    } 
  },  
  { 
    "javascript": { 
      "item_id": "2435595088",
      "tag": "javascript" 
    } 
  },  
  { 
    "react": { 
      "item_id": "2465629468",
      "tag": "react" 
    } 
  } 
];
const outputObj = input.reduce((a, outerObj) => {
  Object.entries(outerObj).forEach(([key, { item_id }]) => {
    if (!a[key]) a[key] = [];
    a[key].push({ item_id });
  });
  return a;
}, {});
const output = Object.entries(outputObj).map(([key, arr]) => ({ [key]: arr }));
console.log(output);

答案 2 :(得分:1)

这是我尝试将Array.reduce()与嵌套的Object.values()Array.forEach()结合使用的方法:

const input = [ 
  { 
    "web_devt": {"item_id": "858850847", "tag": "web_devt"} 
  }, 
  { 
    "web_devt": {"item_id": "1004644524", "tag": "web_devt"} 
  }, 
  { 
    "pdo": {"item_id": "1056300113", "tag": "pdo"}, 
    "php": {"item_id": "1056300113", "tag": "php"}, 
    "web_devt": {"item_id": "1056300113", "tag": "web_devt"} 
  }, 
  { 
    "parallax scrolling": {"item_id": "1087678088", "tag": "parallax scrolling"} 
  }, 
  { 
    "react": { "item_id": "2435593852", "tag": "react"} 
  }, 
  { 
    "javascript": {"item_id": "2435595088", "tag": "javascript"} 
  }, 
  { 
    "react": {"item_id": "2465629468", "tag": "react"} 
  } 
];

let res = input.reduce((acc, obj) =>
{
    Object.values(obj).forEach(({item_id, tag}) =>
    {
        acc[tag] = acc[tag] || {[tag]:[]}
        acc[tag][tag].push(item_id);
    });
    return acc;
}, {});

console.log(Object.values(res));
.as-console {background-color:black !important; color:lime;}
.as-console-wrapper{max-height:100% !important; top:0}