javascript - 比较两个数组并将缺失元素加 0
问题描述
我被嵌套数组困住了。我需要使用高图绘制图表。
我能够根据图表的要求转换数据。但是,我需要使用另一个数组列表检查公司名称是否存在于这个转换后的数组列表中,该数组列表包含一个静态元素,如 ['BCM'、'CGRLH'、'HMS'、'Insurance']。正如您所看到的,有时每个对象中的垂直数组由一个或两个元素组成。
示例:第一个 obj Attrition 在垂直数组中获得 3 个元素,在 data 属性中获得 3 个元素。我想将 0 添加到结果数组中的所有数据属性。像 [1, 2, 0, 4] 因为缺少“HMS”。请让我知道如何实现它。
API 响应:
const categoriesWise = [
{
vertical: 'BCM',
total: '297',
values: [
{
keyword: 'Attrition',
countOfKeyword: 24
},
{
keyword: 'Backlog',
countOfKeyword: 6
},
{
keyword: 'Complaince',
countOfKeyword: 12
}
]
},
{
vertical: 'CGRLH',
total: '300',
values: [
{
keyword: 'Attrition',
countOfKeyword: 20
},
{
keyword: 'Backlog',
countOfKeyword: 10
},
{
keyword: 'Complaince',
countOfKeyword: 14
}
]
},
{
vertical: 'HMS',
total: '250',
values: [
{
keyword: 'Backlog',
countOfKeyword: 16
},
{
keyword: 'Complaince',
countOfKeyword: 11
}
]
}
]
VueJS 中的 API 数据转换代码
formatCategoryWiseChartData(categoriesWise) {
const data = [];
const result = [];
for (let i = 0; i < categoriesWise.length; i += 1) {
const total = categoriesWise[i].total;
categoriesWise[i].values.forEach((e) => {
data.push({ name: e.keyword, data: [(e.countofkeyword * 100) / total], vertical: [categoriesWise[i].verticalName] });
});
}
data.forEach((item) => {
const existing = result.filter((resultItem) => resultItem.name === item.name);
if (existing.length) {
const existingIndex = result.indexOf(existing[0]);
result[existingIndex].data.push(...item.data);
result[existingIndex].vertical.push(...item.vertical);
} else {
result.push(item);
}
});
console.log('result reached --->', result);
return result;
},
下面的变换数组
结果:(示例不是实际值)
const result = [
{
name: 'Attrition',
data: [1, 2, 3],
vertical: ['BCM', 'CGRLH', 'Insurance']
},
{
name: 'Backlog',
data: [1, 2, 3, 4],
vertical: ['BCM', 'CGRLH', 'HMS', 'Insurance']
},
{
name: 'Complaince',
data: [1],
vertical: ['Insurance']
}
]
解决方案
您可以获取静态元素的数组并将值分配给相同的索引。
var categoriesWise = [{ vertical: 'BCM', total: '297', values: [{ keyword: 'Attrition', countOfKeyword: 24 }, { keyword: 'Backlog', countOfKeyword: 6 }, { keyword: 'Complaince', countOfKeyword: 12 }] }, { vertical: 'CGRLH', total: '300', values: [{ keyword: 'Attrition', countOfKeyword: 20 }, { keyword: 'Backlog', countOfKeyword: 10 }, { keyword: 'Complaince', countOfKeyword: 14 }] }, { vertical: 'HMS', total: '250', values: [{ keyword: 'Backlog', countOfKeyword: 16 }, { keyword: 'Complaince', countOfKeyword: 11 }] }],
staticValues = ['BCM', 'CGRLH', 'HMS', 'Insurance'],
result = categoriesWise.reduce((r, { vertical, total, values }) => {
values.forEach(({ keyword: name, countOfKeyword }) => {
var temp = r.find(q => q.name === name);
if (!temp) r.push(temp = { name, data: staticValues.map(_ => 0), vertical: [...staticValues] });
temp.data[staticValues.indexOf(vertical)] = countOfKeyword * 100 / total;
});
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
推荐阅读
- sql - 获取从 x% 到 y% 所需的平均时间 (SQL)
- python - 在 python pandas 中使用 read_csv 忽略回车符(u1000D)
- python - 将字典传递给具有解包参数的函数
- sql - Oracle过程从查询结果中插入多行
- javascript - 似乎无法将 React 自定义钩子的返回直接传递给 React 上下文
- razor - Razor组件按钮@onclick不调用c#方法
- python-3.x - Pandas groupby时间戳并增加计数
- haproxy - 为什么我的 Haproxy 统计 GUI 限制会话在后端坚持 20000?
- html - HTML图像未加载图像src
- r - openxlsx在writeData()中的多行中重复一个字符串?