js数组按同一属性分类

Question

后台给了商品的数据接口，要按同一供应商分类渲染。其中 gysid是供应商的名字,现在已经按gysid排序好了。
数据格式：
[{spid:01,gysid:a,spname:商品1,price:2},
{spid:02,gysid:a,spname:商品2,price:5},
{spid:03,gysid:b,spname:商品3,price:3},
{spid:04,gysid:c,spname:商品4,price:7},
{spid:05,gysid:c,spname:商品5,price:6}]
要实现如下图效果，供应商的名字加这类商品和价格，不能用两层嵌套遍历！！求大神帮忙！！！

Answer 1

var  arr = \[{ spid:  01, gysid:  'a', spname:  '商品1' }, { spid:  02, gysid:  'a', spname:  '商品2' }, { spid:  03, gysid:  'b', spname:  '商品3' }, { spid:  04, gysid:  'c', spname:  '商品4 ' }, { spid:  05, gysid:  'c', spname:  '商品5' }\]

var  current, str = '';

for (var  i = 0; i < arr.length; i++) {

if (current !== arr\[i\].gysid) {

str += \`<li>${arr\[i\].gysid}\`

}

current = arr\[i\].gysid

str += \`<span>${arr\[i\].spname}<span>\`

if (arr\[i + 1\] == 'undefined' || (arr\[i + 1\] ? arr\[i\].gysid != arr\[i + 1\].gysid : true)) {

str += '</li>'

}

}

document.getElementById('id').innerHTML = str;

Answer 2

emmmm 写得不太好，仅供参考

const arr = [{spid:01, gysid: 'a', spname: '商品1'},
           {spid:02, gysid: 'a', spname: '商品2'},
           {spid:03, gysid: 'b', spname: '商品3'},
           {spid:04, gysid: 'c', spname: '商品4'},
           {spid:05, gysid: 'c', spname: '商品5'}];

const map = new Map();

arr.forEach(item => {
  if (!map.has(item.gysid)) {
    map.set(item.gysid, [item.spname]);
  } else {
    map.set(item.gysid, [map.get('a'), item.spname].flat());
  }
});

map.forEach((spnames, gysid) => {
  console.log(gysid + ' ' + spnames)
});

"a 商品1,商品2"
"b 商品3"
"c 商品1,商品2,商品5"

Answer 3

const arr  =  [

{  spid:  "01",  gysid:  "a",  spname:  "商品1"  },

{  spid:  "02",  gysid:  "a",  spname:  "商品2"  },

{  spid:  "03",  gysid:  "b",  spname:  "商品3"  },

{  spid:  "04",  gysid:  "c",  spname:  "商品4"  },

{  spid:  "05",  gysid:  "c",  spname:  "商品5"  }

];

let arrNew  =  {};

arr.forEach(item  =>  {

if  (arrNew[`${item.gysid}`]  &&  arrNew\[`${item.gysid}`].length >  0)  {

arrNew[`${item.gysid}`].push(item);

return;

}

arrNew[`${item.gysid}`]  =  [];

arrNew[`${item.gysid}`].push(item);

});

console.log(arrNew);

}

Answer 4

这种UI设计的数据结构用数组Map比较高效吧。先遍历一次，生成gysid和商品list对应关系的map结构。之后如果使用的是框架开发，直接for循环遍历对象就实现了，如果原生JS，建议写一个common函数去生成对应的UI结构，思路仍然是遍历。