如何在Angular中按服务器分组

huangapple go评论97阅读模式
英文:

How to group by server in Angular

问题

这是代码:

list.component.ts

data = [
  {
    "id": 19,
    "server": "Server 1",
    "dl": "35.88 Mbit/s",
    "ul": "46.76 Mbit/s",
  },
  {
    "id": 30,
    "server": "Server 1",
    "dl": "45.06 Mbit/s",
    "ul": "48.25 Mbit/s",
  },
  {
    "id": 26,
    "server": "Server 1",
    "dl": "47.96 Mbit/s",
    "ul": "47.89 Mbit/s",
  }
]

如何将Server 1分组?

输出应为:

{
   server: 'Server 1',
   data: [
      {
        "id": 19,
        "dl": "35.88 Mbit/s",
        "ul": "46.76 Mbit/s",
      },
      {
        "id": 30,
        "dl": "45.06 Mbit/s",
        "ul": "48.25 Mbit/s",
      },
      {
        "id": 26,
        "dl": "47.96 Mbit/s",
        "ul": "47.89 Mbit/s",
      }
   ]
}
英文:

here's the code:

list.component.ts

 data = [   {
          "id": 19,
          "server": "Server 1",
          "dl": "35.88 Mbit/s",
          "ul": "46.76 Mbit/s",
        },
        {
          "id": 30,
          "server": "Server 1",
          "dl": "45.06 Mbit/s",
          "ul": "48.25 Mbit/s",
        },
        {
          "id": 26,
          "server": "Server 1",
          "dl": "47.96 Mbit/s",
          "ul": "47.89 Mbit/s",
        } ]

how to group the Server 1?

the output should be

{
   server: 'Server 1',
   data: [
{
              "id": 19,
              "dl": "35.88 Mbit/s",
              "ul": "46.76 Mbit/s",
            },
            {
              "id": 30,
              "dl": "45.06 Mbit/s",
              "ul": "48.25 Mbit/s",
            },
            {
              "id": 26,
              "dl": "47.96 Mbit/s",
              "ul": "47.89 Mbit/s",
            }
]
}

答案1

得分: 1

你可以使用 array.reduce() 来按 server 分组,并使用 Spread 语法获取 other 对象字段:

let data = [
  {
    "id": 19,
    "server": "Data1",
    "dl": "35.88 Mbit/s",
    "ul": "46.76 Mbit/s",
  },
  {
    "id": 30,
    "server": "Data1",
    "dl": "45.06 Mbit/s",
    "ul": "48.25 Mbit/s",
  },
  {
    "id": 26,
    "server": "Data1",
    "dl": "47.96 Mbit/s",
    "ul": "47.89 Mbit/s",
  }
];

let result = data.reduce((state, current) => {
  let { server, ...others } = current;
  if (state[server]) {
    state[server].push(others);
  } else {
    state[server] = [others];
  }
  return state;
}, {});

console.log(result);
英文:

You can use array.reduce() to group by server and Spread syntax to get other object fields:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let data = [   {
          &quot;id&quot;: 19,
          &quot;server&quot;: &quot;Data1&quot;,
          &quot;dl&quot;: &quot;35.88 Mbit/s&quot;,
          &quot;ul&quot;: &quot;46.76 Mbit/s&quot;,
        },
        {
          &quot;id&quot;: 30,
          &quot;server&quot;: &quot;Data1&quot;,
          &quot;dl&quot;: &quot;45.06 Mbit/s&quot;,
          &quot;ul&quot;: &quot;48.25 Mbit/s&quot;,
        },
        {
          &quot;id&quot;: 26,
          &quot;server&quot;: &quot;Data1&quot;,
          &quot;dl&quot;: &quot;47.96 Mbit/s&quot;,
          &quot;ul&quot;: &quot;47.89 Mbit/s&quot;,
        } ]
        
 let result = data.reduce((state,current) =&gt; {
     let {server, ...others} = current;
     if(state[server]){
         state[server].push(others);
     } else {
         state[server] = [others];
     }
     return state;
 }, {});
 
 console.log(result);

<!-- end snippet -->

答案2

得分: 0

你还可以使用forEach来对数据进行分组。

let data = [
  {
    "id": 19,
    "server": "Data1",
    "dl": "35.88 Mbit/s",
    "ul": "46.76 Mbit/s",
  },
  {
    "id": 30,
    "server": "Data1",
    "dl": "45.06 Mbit/s",
    "ul": "48.25 Mbit/s",
  },
  {
    "id": 26,
    "server": "Data1",
    "dl": "47.96 Mbit/s",
    "ul": "47.89 Mbit/s",
  },
  {
    "id": 36,
    "server": "Data2",
    "dl": "41.98 Mbit/s",
    "ul": "41.82 Mbit/s",
  }
];

const groupedArray = (arr) => {
  let newArray = {};
  data.forEach(obj => {
    if(newArray[obj['server']] == undefined){
      newArray[obj['server']] = [ obj ];
    } else{
      newArray[obj['server']].push(obj);
    }
  });
  return newArray;
}

let newData = groupedArray(data);
console.log(newData);
英文:

You can also group data using forEach.

let data = [
  {
    &quot;id&quot;: 19,
    &quot;server&quot;: &quot;Data1&quot;,
    &quot;dl&quot;: &quot;35.88 Mbit/s&quot;,
    &quot;ul&quot;: &quot;46.76 Mbit/s&quot;,
  },
  {
    &quot;id&quot;: 30,
    &quot;server&quot;: &quot;Data1&quot;,
    &quot;dl&quot;: &quot;45.06 Mbit/s&quot;,
    &quot;ul&quot;: &quot;48.25 Mbit/s&quot;,
  },
  {
    &quot;id&quot;: 26,
    &quot;server&quot;: &quot;Data1&quot;,
    &quot;dl&quot;: &quot;47.96 Mbit/s&quot;,
    &quot;ul&quot;: &quot;47.89 Mbit/s&quot;,
  },
  {
    &quot;id&quot;: 36,
    &quot;server&quot;: &quot;Data2&quot;,
    &quot;dl&quot;: &quot;41.98 Mbit/s&quot;,
    &quot;ul&quot;: &quot;41.82 Mbit/s&quot;,
  }
];

const groupedArray = (arr) =&gt; {
  let newArray = {};
  data.forEach(obj =&gt; {
    if(newArray[obj[&#39;server&#39;]] == undefined){
      newArray[obj[&#39;server&#39;]] = [ obj ];
    } else{
      newArray[obj[&#39;server&#39;]].push(obj);
    }
  });
  return newArray;
}

let newData = groupedArray(data);
console.log(newData);

huangapple
  • 本文由 发表于 2020年1月3日 13:50:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/59573770.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定