Javascript - 如何將數組列表轉換爲另一個數組列表中的鍵值？

Question

所以我一直在這個幾個小時難住，我不能真正找出一個優雅的解決方案來解決這個問題。假設我有這樣一個數組：

[ 
    { 
    question: "what is your name?", 
    answer: "Ben", 
    topic: "names" 
    }, 
{ 
    question: "what is your name?", 
    answer: "Ben", 
    topic: "names" 
    }, 
    { 
    question: "What is dog's name?", 
    answer: "Snugglets", 
    topic: "names" 
    }, 
    { 
    question: "What is your brother's age?", 
    answer: 55, 
    topic: "ages" 
    } 
] 

我怎樣才能把它變成一個看起來像這樣的數組？

[ 
    { 
    topic: "names", 
    content: [...array of objects based on "names"...] 
    }, 
{ 
    topic: "ages", 
    content: [...array of objects based on "ages"...] 
    } 
] 

我覺得這應該很容易，但由於某種原因，我的大腦似乎無法把握解決方案。我在這裏錯過了什麼？

UPDATE：感謝您的所有迴應！我並不期望得到這麼多方法來完成這個任務。我接受了其中一個答案，因爲它與ES6有關，我應該指定我希望學習ES6的方法，如果可能的話）：

雖然，我也必須說需求也有改變地方，而不是預期排列了一下，是這樣的：

[ { topic: "names", content: [...array of objects based on "names"...] }, { topic: "ages", content: [...array of objects based on "ages"...] } ]

的陣列需要這個樣子更像：

[ { topic: "names", content: '<div> <h3>Question: What is your name?</h3> <p>Answer: Ben</p> </div> <div> <h3>Question: What is your dog's name?</h3> <p>Answer: Snugglets</p> </div>' }, { topic: "ages", content: content: '<div> <h3>Question: What is your age?</h3> <p>Answer: 50</p> </div> <div> <h3>Question: What is your brother's age?</h3> <p>Answer: 52</p> </div>' } ]

通常情況下，我不LIK e只是要求提供給我的代碼，但我的Javascript foo在算法轉換數據方面似乎有點弱點:(關於如何將所有這些數組元素合併爲一個包含HTML的單個字符串，作爲每個「主題」的「內容」鍵？

另外，這將更好地服務於Stackoverflow的另一個問題？

Answer 1

使用ES6 Map對象時可以簡單地完成如下操作。我還從content數組的項中刪除了多餘的names屬性。

var data = [{question: "what is your name?",answer: "Ben",topic: "names"},{question: "what is your name?",answer: "Ben",topic: "names"},{question: "What is dog's name?",answer: "Snugglets",topic: "names"},{question: "What is your brother's age?",answer: 55,topic: "ages"}], 
 
mapData = data.reduce((p,c) => p.has(c.topic) ? p.set(c.topic,p.get(c.topic).concat({question:c.question, 
 
                         answer:c.answer})) 
 
               : p.set(c.topic,[{question:c.question, 
 
                    answer:c.answer}]),new Map()), 
 
    result = [...mapData].map(e => ({topic:e[0],content:e[1]})); 
 
console.log(result);

Answer 2

您可以將它與臨時對象進行分組，並使用Array#forEach進行迭代。

的forEach()方法每個數組元素一次執行設置功能。

var data = [{ question: "what is your name?", answer: "Ben", topic: "names" }, { question: "what is your name?", answer: "Ben", topic: "names" }, { question: "What is dog's name?", answer: "Snugglets", topic: "names" }, { question: "What is your brother's age?", answer: 55, topic: "ages" }], 
 
    group = []; 
 

 
data.forEach(function (a) { 
 
    if (!this[a.topic]) { 
 
     this[a.topic] = { topic: a.topic, content: [] }; 
 
     group.push(this[a.topic]); 
 
    } 
 
    this[a.topic].content.push(a); 
 
}, Object.create(null)); 
 

 
console.log(group);

Answer 3

試試這個：

var input = [ 
 
    { 
 
    question: "what is your name?", 
 
    answer: "Ben", 
 
    topic: "names" 
 
    }, 
 
{ 
 
    question: "what is your name?", 
 
    answer: "Ben", 
 
    topic: "names" 
 
    }, 
 
    { 
 
    question: "What is dog's name?", 
 
    answer: "Snugglets", 
 
    topic: "names" 
 
    }, 
 
    { 
 
    question: "What is your brother's age?", 
 
    answer: 55, 
 
    topic: "ages" 
 
    } 
 
]; 
 
var tmp = input.reduce(function(topics, obj) { 
 
    topics[obj.topic] = topics[obj.topic] || {topic: obj.topic, content: []}; 
 
    topics[obj.topic].content.push(obj); 
 
    return topics; 
 
}, {}); 
 
var output = Object.keys(tmp).map(function(key) { 
 
    return tmp[key]; 
 
}); 
 
console.log(output);

Answer 4

功能更強大的方法是使用Array.reduce。這也消除了一個臨時變量的需要：

var output = data.reduce(function(prev, cur) { 
    if (!prev[cur.topic]) prev[cur.topic] = []; 
    prev[cur.topic].push(cur); 
    return prev; 
}, {}); 

見JS斌的工作例如：
https://jsbin.com/yesucaquwa/1/edit?js,console

Answer 5

有一個簡單的功能爲您服務。

var arr=[ 
    { 
    question: "what is your name?", 
    answer: "Ben", 
    topic: "names" 
    }, 
    { 
    question: "what is your name?", 
    answer: "Ben", 
    topic: "names" 
    }, 
    { 
    question: "What is dog's name?", 
    answer: "Snugglets", 
    topic: "names" 
    }, 
    { 
    question: "What is your brother's age?", 
    answer: 55, 
    topic: "ages" 
    } 
] 
function turnToOtherArray(arr){ 
    var result=[]; 
    for(var i=0,mamorize={};i<arr.length;i++){ 
     if(mamorize[arr[i].topic]){ 
      mamorize[arr[i].topic].push(arr[i].question) 
     }else{ 
      mamorize[arr[i].topic]=[arr[i].question] 
     } 
    } 
    for(var key in mamorize){ 
     result[result.length] = { "topic" : key , "content" : mamorize[key]} 
    } 
    return result; 
} 
console.log(turnToOtherArray(arr));