如果 json 中的数组大于 1，则在新行显示数据

Question

我正在调用 Angular 中的 Api 并在 Angular 中的 mat-table 上显示数据 7.

响应是这样的

{
            "promo": "Mon",
            "start": "2019",
            "carrier": "[UPS Ground, UPS Express, UPS Expedited]",
            "end": "2020",
            "shipTime": "[10, 2Day, Overnight]",
            "price": "[0.0, 14.99, 24.99]", 
        }

我在垫子上显示此数据 Table 像这样

Mon|2019| [UPS Ground, UPS Express, UPS Expedited] | 2020 | [10, 2Day, Overnight]| [0.0, 14.99, 24.99]

But i want to display it like this 

Mon | 2019 | UPS Ground | 2020 |10 | 0.0

Mon | 2019 | UPS Express | 2020 |2day| 14.99

Mon | 2019 | UPS Expedited | 2020 | Overnight | 24.99

有什么建议、link 或教程可以指给我看吗？我四处搜索，找不到任何东西。

谢谢

Answer 1

您必须自己重新格式化数据，最好是在您最初获取数据的 Angular 服务中。

假设 carrier、shipTime 和 price 数组的长度始终相等且顺序相同，则以下应该有效。

const newResp = [];
resp.forEach(promo => {
  promo.carrier.forEach((carrier, i) => {
    const shipTime = promo.shipTime[i];
    const price = promo.price[i];
    newResp.push({ ...promo, carrier, shipTime, price });
  });
});
return newResp;

此代码正在为每个促销活动中的每个承运人在 newResp 列表中创建一个新条目。如果促销活动没有任何运营商，则不会为该促销活动创建任何条目。

Answer 2

假设 carrier price 和 shipTime 具有相同的长度。现在您可以循环 modifiedInput 以显示在 table.

中

const input = [{
  "promo": "Mon",
  "start": "2019",
  "carrier": ['UPS Ground', 'UPS Express', 'UPS Expedited'],
  "end": "2020",
  "shipTime": ['10', '2Day', 'Overnight'],
  "price": ['0.0', '14.99', '24.99']
},{
  "promo": "Tue",
  "start": "2019",
  "carrier": 'UPS Ground',
  "end": "2020",
  "shipTime": 'Overnight',
  "price": '14.99'
}];

const modifiedInput = input.reduce((output, item) => {
  if(item.carrier instanceof Array) {
    item.carrier.forEach((carrier, index) => {
      output.push({
        ...item,
        carrier,
        shipTime: item.shipTime[index],
        price: item.price[index]
      });
    });
  } else {
    output.push(item);
  }

  return output;
}, []);

console.log(modifiedInput);

.as-console-wrapper {
  max-height: 100% !important;
}

如果 json 中的数组大于 1，则在新行显示数据

Display Data on new row if array in json is greater than 1

json

typescript

angular

mat-table