小编典典

按首字母顺序按字母顺序对对象进行排序和分组

reactjs

我试图创建一个像这样的集合以便在react组件中使用:

let data = [
    { 
        group : 'A', 
        children : [
            { name : 'Animals', id : 22 },
            ...
        ]
    },
    { 
        group : 'B', children : [
            { name : 'Batteries', id : 7},
            { name : 'Baggage', id : 12 },
            ...
        ]
    },
    { 
        group : 'C', children : [
            { name : 'Cake', id : 7},
            ...
        ]
    },
]

我已经像这样对我的数据进行了排序:

let rawData = [
    { name : 'Animals', id : 10},
    { name : 'Batteries', id : 7},
    { name : 'Baggage', id : 12 },
    { name : 'Cake', id : 7},
    ...
]

此外,我用这个排序方法,但问题是,它返回一个对象有ABC与孩子值的键。但是我必须像上面一样将其转换为数组才能使用它。

到目前为止,这是我尝试过的:

let data = rawData.reduce(function(prevVal, newVal){   
    char = newVal.name[0].toUpperCase();
    return { group: char, children :{name : newVal.name, id : newVal.id}};
},[])

阅读 276

收藏
2020-07-22

共1个答案

小编典典

您可以使用创建对象,reduce然后Object.values在该对象上使用。

let rawData = [

  { name : 'Animals', id : 10},

  { name : 'Batteries', id : 7},

  { name : 'Baggage', id : 12 },

  { name : 'Cake', id : 7},

]



let data = rawData.reduce((r, e) => {

  // get first letter of name of current element

  let group = e.name[0];

  // if there is no property in accumulator with this letter create it

  if(!r[group]) r[group] = {group, children: [e]}

  // if there is push current element to children array for that letter

  else r[group].children.push(e);

  // return accumulator

  return r;

}, {})



// since data at this point is an object, to get array of values

// we use Object.values method

let result = Object.values(data)



console.log(result)
2020-07-22