map into an array of object

Question

I've got that object :

foodDatas: {
  "_id": "603cf063c9f3a13528634bab",
  "description": "petit déjeuner parisien local sur l'ile",
  "hotel": "603cd6ae5206ad4f04296218",
  "nameArticle": "Parisien",
  "prix": 15,
  "type": "PetitDejeuner",
  "detail": [
    { "pastries": ["croissant","pain au chocolat"] },
    { "drinks": ["café","thé"] },
    { "fromages": ["kiri", "camembert"] },
  ],
  
}

What I want to do is to map through detail array to display each element of the value of the objects that contains each of its elements.

In others terms, I want to make a list like below

pastries:

croissant
pain au chocolat

drinks:

café
thé

fromages:

kiri
camemebert

I've tried this :

                    {Object.keys(foodDatas.detail).map((category, i) => {
                      
                      return (
                        <>
                        <Text style={styles.category}>{category}</Text>
                        
// From here I want to map through category to display its content** 

                        <View style={styles.choices}>
                          <View style={styles.options}>
                            <TextInput
                              style={styles.input}
                              onChangeText={handleChange("croissant")}
                              placeholder={"1"}
                              keyboardType={'numeric'}
                              value={values.croissant}
         
                            />
                         
                            <Text style={styles.itemOption}>Croissant</Text>
                          </View>
                          </View>
                        </>
                      )
                    })}

But I didn't get the name of the categories (pastries, fromages, etc.), instead I've got their index (0,1, etc.). Also, I don't know how to retrieve the value of each category ( croissant, pain au chocolat, café, etc.)

Thank for any help you can give

Note if you are responsible for the data structure, it is far better to use a common key name structure in each object such as {type:'pastries, items:["croissant","pain au chocolat"]} rather than using unique key names generated by the category names — charlietfl
– charlietfl, Commented Mar 7, 2021 at 15:20

Aaron · Accepted Answer · 2021-03-07 15:13:44Z

To first address why you're getting the index, it's because you're using Object.keys() on an array (foodDatas.detail is an array not an object).

To get your current implementation working, you'll need to do something like:

return foodDatas.detail.map((categoryObj) => (
    Object.keys(categoryObj).map((category) => (
        <>
            <Text style={styles.category}>{category}</Text>
            {categoryObj[category].map((entry) => (
                <View style={styles.choices}>
                    <View style={styles.options}>
                        <TextInput
                          style={styles.input}
                          onChangeText={handleChange(entry)}
                          placeholder={"1"}
                          keyboardType={'numeric'}
                          value={entry}
                        />
                        <Text style={styles.itemOption}>{entry}</Text>
                    </View>
                </View>
            ))}
        </>
    
    ));
));

Amit Mondal · Accepted Answer · 2021-03-07 15:16:22Z

When you are trying to iterate over foodDatas.detail using Object.keys(foodDatas.detail) it will return index because foodDatas.detail is an array and the key are the indexes.

// If you check in your debugger/Console this is the structure
detail: [
  0: {pastries: Array(2)}
  1: {drinks: Array(2)}
  2: {fromages: Array(2)}
]

This is not solution but will make you understand a bit, probably you will need 2 loops to achieve what you want.

foodDatas.detail.map((category, i)=>{
    // This will give each object { "pastries": ["croissant","pain au chocolat"] }
    const [key] = Object.keys(category); // key will be pastries, drinks, fromages, etc
    const value = Object.values(category); // value will be ["croissant","pain au chocolat"], ["café","thé"], ["kiri", "camembert"]

    console.log(key, value); // You can verify it here
})

JustCode · Accepted Answer · 2021-03-07 15:42:30Z

Code looks something like this

const foodDatas = {
      "_id": "603cf063c9f3a13528634bab",
      "description": "petit déjeuner parisien local sur l'ile",
      "hotel": "603cd6ae5206ad4f04296218",
      "nameArticle": "Parisien",
      "prix": 15,
      "type": "PetitDejeuner",
      "detail": [
        { "pastries": ["croissant","pain au chocolat"] },
        { "drinks": ["café","thé"] },
        { "fromages": ["kiri", "camembert"] },
      ],
    };


    return (
        <React.Fragment>
        {foodDatas["detail"].map((item, key) =>
        Object.keys(item).map((key) => (
          <div>
            {key}
            <ul>
              {item[key].map((subitem , key) => (
                <li>{subitem}</li>
              ))}
            </ul>
          </div>
        ))
      )}
        </React.Fragment>
    )

Arda Örkin · Accepted Answer · 2021-03-07 15:31:57Z

You need to something like this:

const foodDatas = {
  _id: "603cf063c9f3a13528634bab",
  description: "petit déjeuner parisien local sur l'ile",
  hotel: "603cd6ae5206ad4f04296218",
  nameArticle: "Parisien",
  prix: 15,
  type: "PetitDejeuner",
  detail: [
    { pastries: ["croissant", "pain au chocolat"] },
    { drinks: ["café", "thé"] },
    { fromages: ["kiri", "camembert"] },
  ],
};

function App() {
  return (
    <div>
      {foodDatas["detail"].map((object, key) =>
        Object.keys(object).map((key) => (
          <ul>
            {key}
            {object[key].map((element) => (
              <li>{element}</li>
            ))}
          </ul>
        ))
      )}
    </div>
  );
}

export default App;

Collectives™ on Stack Overflow

map into an array of object

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related