le même groupe `objets category`

Question

Je suis en train de regrouper les données brutes:

items: 
[ 
    { 
     category: "blog", 
     id  : "586ba9f3a36b129f1336ed38", 
     content : "foo, bar!" 
    }, 
    { 
     category: "blog", 
     id  : "586ba9f3a36b129f1336ed3c", 
     content : "hello, world!" 
    }, 
    { 
     category: "music", 
     id  : "586ba9a6dfjb129f1332ldab", 
     content : "wow, shamwow!" 
    }, 
] 

à

[ 
    { 
     category: "blog", 
     items: 
     [ 
      { 
       id  : "586ba9f3a36b129f1336ed38", 
       content : "foo, bar!" 
      }, 
      { 
       id  : "586ba9f3a36b129f1336ed3c", 
       content : "hello, world!" 
      }, 
     ] 
    }, 
    { 
     category: "music", 
     items: 
     [ 
      { 
       id  : "586ba9a6dfjb129f1332ldab", 
       content : "wow, shamwow!" 
      } 
     ] 
    } 
] 

Le format comme cela me permet d'imprimer les données même catégorie ensemble le frontend.

Le contenu du champ category est dynamiquement, donc je ne suis pas sûr comment puis-je le stocker dans un objet temporaire et les trier, des idées?

(je ne peux pas penser à un meilleur titre pour la question, s'il vous plaît modifier si vous avez obtenu un meilleur titre.)

Answer 1

Je viens de résoudre la question avec le code suivant (jsfiddle):

// Items 
// var items = [] 

// Create an empty object, used to store the different categories. 
var temporaryObject = {} 

// Scan for each of the objects in the `items` array. 
items.forEach((item) => 
{ 
    // Create a category in the teporary object if the category 
    // hasn't been created. 
    if(typeof temporaryObject[item.category] === "undefined") 
     temporaryObject[item.category] = [] 

    // Push the item to the its category of the `temporaryObject`. 
    temporaryObject[item.category].push({ 
     id  : item.id, 
     content: item.content 
    }) 
}) 


// Create a empty array used to stores the sorted, grouped items. 
var newItems = [] 

// Scan for each of the category in the `temporaryObject` 
for(var category in temporaryObject) 
{ 
    // Push the new category in the `newItems` array. 
    newItems.push({ 
     category: category, 
     items : [] 
    }) 

    // Get the last category index of the `newItems` array, 
    // so we can push the related data to the related category. 
    var lastItem = newItems.length - 1 

    // Scan for the related category in the `temporaryObject` object. 
    temporaryObject[category].forEach((item) => 
    { 
     // Push the related data to the related category of the `newItems` array. 
     newItems[lastItem].items.push(item) 
    }) 
} 

// Prints the sorted, grouped result. 
console.log(newItems) 

Answer 2

Personnellement, sans bibliothèques d'aide, je venais de faire ce

var step1 = items.reduce((result, {category, id, content}) => { 
    result[category] = result[category] || []; 
    result[category].push({id, content}); 
    return result; 
}, {}); 
var result = Object.keys(step1).map(category => ({category, items: step1[category]})); 

qui babel se transforme en

var step1 = items.reduce(function (result, _ref) { 
    var category = _ref.category, 
     id = _ref.id, 
     content = _ref.content; 

    result[category] = result[category] || []; 
    result[category].push({ id: id, content: content }); 
    return result; 
}, {}); 
var result = Object.keys(step1).map(function (category) { 
    return { category: category, items: step1[category] }; 
}); 

Answer 3

Vous pouvez le faire en utilisant Array#reduce en un seul passage:

var items = [{"category":"blog","id":"586ba9f3a36b129f1336ed38","content":"foo, bar!"},{"category":"blog","id":"586ba9f3a36b129f1336ed3c","content":"hello, world!"},{"category":"music","id":"586ba9a6dfjb129f1332ldab","content":"wow, shamwow!"}]; 
 

 
var result = items.reduce(function(r, item) { 
 
    var current = r.hash[item.category]; 
 
    
 
    if(!current) { 
 
    current = r.hash[item.category] = { 
 
     category: item.category, 
 
     items: [] 
 
    }; 
 
    
 
    r.arr.push(current); 
 
    } 
 

 
    current.items.push({ 
 
    id: item.id, 
 
    content: item.content 
 
    }); 
 
    
 
    return r; 
 
}, { hash: {}, arr: [] }).arr; 
 
    
 
console.log(result);

Ou la façon ES6 en utilisant Map:

const items = [{"category":"blog","id":"586ba9f3a36b129f1336ed38","content":"foo, bar!"},{"category":"blog","id":"586ba9f3a36b129f1336ed3c","content":"hello, world!"},{"category":"music","id":"586ba9a6dfjb129f1332ldab","content":"wow, shamwow!"}]; 
 

 
const result = [...items.reduce((r, { category, id, content }) => { 
 
    r.has(category) || r.set(category, { 
 
    category, 
 
    items: [] 
 
    }); 
 
    
 
    r.get(category).items.push({ id, content }); 
 
    
 
    return r; 
 
}, new Map).values()]; 
 
    
 
console.log(result);