React – Create array from arrays in Objects

Question

Beginner React/JS question here. I have a series of entries (form submissions) that each contain arrays of languages like so:

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" ]

I want an array of all languages in each category. I understand that I have to filter through each entry and save the languages, but I don't know how to check for duplicates.

Currently, I can filter to view entries a single language using

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

but I can't figure out how to create a master list of all languages.

gaetan224 · Accepted Answer · 2020-07-25 07:53:25Z

2

is this what you want ? you need to reduce and filter du avoid duplicates,you will have an object as result

    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)

answered Jul 25, 2020 at 7:53

gaetan224

6564 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jamesco Over a year ago

Yeah, that's returning exactly what I wanted. Thanks!

felixmosh · Accepted Answer · 2020-07-25 07:45:01Z

1

You can use Object.values and Object.entries in order to traversal the data 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);

answered Jul 25, 2020 at 7:45

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Comments

Niccolò Caselli · Accepted Answer · 2020-07-25 08:12:23Z

Honestly, I didn't understand the question very well. But I tried to interpret it like this, let me know:

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);

Drew Reese · Accepted Answer · 2020-07-25 08:04:05Z

Given data

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

First convert the array of category-languages arrays to a reduced object of category-language sets. The sets are used to remove duplicates.

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;
}, {});

You now have an object with shape

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

Then again reduce this to an object of category - languages array. This is simply converting the sets back to an array.

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

Result object shape

{
  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);

Jadli · Accepted Answer · 2020-07-25 12:08:42Z

try This Obj structure

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))

Collectives™ on Stack Overflow

React – Create array from arrays in Objects

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related