javascript - 比较两个数组，缺失元素加0

Question

我被嵌套数组困住了。我需要使用高图绘制图表。

我能够根据图表的要求转换数据。但是，我需要使用另一个数组列表检查此转换后的数组列表中是否存在公司名称，该数组列表由 ['BCM'、'CGRLH'、'HMS'、'Insurance'] 等静态元素组成。正如您所看到的，有时每个对象中的垂直数组由一个或两个元素组成。

示例:第一个 obj Attrition 在垂直数组中有 3 个元素，在数据属性中有 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']
  }
]

Answer 1

您可以采用静态元素的数组并将值分配给相同的索引。

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; }