React – 從 Objects 中的 arrays 創建數組

Question

初學者 React/JS 問題在這里。 我有一系列條目（表單提交），每個條目都包含 arrays 語言，如下所示：

0: {…}
dream: Array [ "Bengali", "French" ]
feel: Array [ "Arabic", "English" ]​​
speak: Array [ "Afrikaans", "Armenian" ]
think: Array [ "Albanian" ]

1: {…}
dream: Array [ "English", "French" ]
feel: Array [ "German", "Italian" ]​​
speak: Array [ "Afrikaans", "English" ]
think: Array [ "Cantonese" ]

我想要每個類別中所有語言的數組。 我知道我必須過濾每個條目並保存語言，但我不知道如何檢查重復項。

目前，我可以使用過濾器查看單一語言的條目

setFilter(entries.filter((key) => key.speak.includes("Afrikaans")));

但我不知道如何創建所有語言的主列表。

Answer 1

這是你想要的嗎？ 您需要減少和過濾以避免重復，結果您將獲得 object

 const myArray = [{ dream: [ "Bengali", "French" ], feel: [ "Arabic", "English" ], speak: [ "Afrikaans", "Armenian" ], think: [ "Albanian" ] },{ dream: [ "Bengaslis", "French" ], feel: [ "Arabsic", "English" ], speak: [ "Afrikasans", "Armenian" ], think: [ "Assslbanian" ] } ]; const result = myArray.reduce((accumulator, currentValue) => { const dream = accumulator.dream.concat(currentValue.dream); const think = accumulator.think.concat(currentValue.think); const feel = accumulator.feel.concat(currentValue.feel); const speak = accumulator.speak.concat(currentValue.speak); accumulator.dream = dream.filter((item, pos) => dream.indexOf(item) === pos) accumulator.feel = feel.filter((item, pos) => feel.indexOf(item) === pos); accumulator.speak = speak.filter((item, pos) => speak.indexOf(item) === pos); accumulator.think = think.filter((item, pos) => think.indexOf(item) === pos); return accumulator; }) console.log(result)

Answer 2

您可以使用Object.values和Object.entries來遍歷數據 object。

 const data = { 0: { dream: ["Bengali", "French"], feel: ["Arabic", "English"], speak: ["Afrikaans", "Armenian"], think: ["Albanian"], }, 1: { dream: ["English", "French"], feel: ["German", "Italian"], speak: ["Afrikaans", "English"], think: ["Cantonese"], } }; const categoryMap = Object.values(data).reduce((concatedArr, item) => concatedArr.concat(Object.entries(item)), []).reduce((result, [category, values]) => { result[category] = result[category] || []; result[category] = result[category].concat(values); return result; }, {}); console.log(categoryMap);

Answer 3

老實說，我沒有很好地理解這個問題。 但我試圖這樣解釋它，讓我知道：

 const entries = [ { dream: [ "Bengali", "French" ], feel: [ "Arabic", "English"], speak: [ "Afrikaans", "Armenian" ], think: [ "Albanian" ], },{ dream: [ "English", "French" ], feel: [ "German", "Italian" ], speak: [ "Afrikaans", "English" ], think: [ "Cantonese" ], } ] const fields = ["dream", "feel", "speak","think"]; const result = {}; for(field of fields){ // create an array containing all the languages of the specific category of the for-loop (there may be duplications) const rawArray = entries.map(item => item[field]).flat(); // delete duplicates const arrayWithoutDuplicates = rawArray.filter((item,index) => rawArray.indexOf(item) === index); result[field] = arrayWithoutDuplicates; } console.log(result);

Answer 4

給定數據

const data = [
  {
    dream: ["Bengali", "French"],
    feel: ["Arabic", "English"],
    speak: ["Afrikaans", "Armenian"],
    think: ["Albanian"]
  },
  {
    dream: ["English", "French"],
    feel: ["German", "Italian"],
    speak: ["Afrikaans", "English"],
    think: ["Cantonese"]
  }
];

首先將類別語言數組 arrays 轉換為類別語言集的簡化 object。 這些集合用於刪除重復項。

const reducedData = data.reduce((categories, current) => {
  // Loop over the categories (dream, feel, etc..)
  // and add languages to sets
  Object.entries(current).forEach(([currentCategory, languages]) => {
    if (!categories[currentCategory]) {
      // A set will not allow duplicate entires
      categories[currentCategory] = new Set();
    }

    // Add all languages to the set
    languages.forEach(language => categories[currentCategory].add(language));
  });
  return categories;
}, {});

你現在有一個 object 形狀

{
  dream: Set("Bengali", "French", "English"), 
  feel: Set("Arabic", "English", "German", "Italian"),
  speak: Set("Afrikaans", "Armenian", "English"),
  think: Set("Albanian", "Cantonese"),
}

然后再次將其簡化為類別 - 語言數組的 object。 這只是將集合轉換回數組。

const reducedDataArray = Object.entries(reducedData).reduce(
  (categories, [category, languageSet]) => {
    // Convert Set back to an array
    categories[category] = [...languageSet];
    return categories;
  },
  {}
);

結果 object 形狀

{
  dream: ["Bengali", "French", "English"], 
  feel: ["Arabic", "English", "German", "Italian"],
  speak: ["Afrikaans", "Armenian", "English"],
  think: ["Albanian", "Cantonese"],
}

 const data = [ { dream: ["Bengali", "French"], feel: ["Arabic", "English"], speak: ["Afrikaans", "Armenian"], think: ["Albanian"] }, { dream: ["English", "French"], feel: ["German", "Italian"], speak: ["Afrikaans", "English"], think: ["Cantonese"] } ]; const reducedData = data.reduce((categories, current) => { Object.entries(current).forEach(([currentCategory, languages]) => { if (;categories[currentCategory]) { categories[currentCategory] = new Set(). } languages.forEach(language => categories[currentCategory];add(language)); }); return categories, }; {}). const reducedDataArray = Object.entries(reducedData),reduce( (categories, [category. languageSet]) => { categories[category] = [..;languageSet]; return categories, }; {} ). console;log(reducedDataArray);

Answer 5

試試這個 Obj 結構

 var completObj=[ { dream:[ "Bengali", "French" ], feel:[ "Arabic", "English" ], speak:[ "Afrikaans", "Armenian" ], think:[ "Albanian" ] }, { dream:[ "English", "French" ], feel:[ "German", "Italian" ], speak:[ "Afrikaans", "English" ], think:[ "Cantonese" ] } ] var Afrikaans=completObj.filter((key) => key.speak.includes("Afrikaans")) console.log('Afrikaans:'+JSON.stringify( Afrikaans)) var uniqueObj={} completObj.map((value, index) => { Object.entries(completObj[index]).forEach(([ObjKey, value]) => { if (;uniqueObj[ObjKey]) { uniqueObj[ObjKey] = new Set(). } debugger value.map(list => uniqueObj[ObjKey];add(list)). // uniqueObj[ObjKey];add(value) }); }). var dream=Array.from(uniqueObj.dream) console:log('dream unique Value.'+JSON.stringify( dream))