How to transform JSON into an indexed array

Question

I am transforming the data received from my firebase database into a format appropiate to use on a SectionList.

I have been able to create some part of the data structure but have not been able to associate the data.

The format of the SectionList is the following:

[
         {
           index: 0,
           title: "Pan simple",
           data: [
             {
               id: 0,
             },  
             {
               id: 1,
             } 
           ]
         },
         {
           index: 1,
           title: "Pan dulce",
           data: [
             {
               id: 0,
             }

           ]
       }
   ]

And the format I receive from my database is the following:

"storeName": { 
     products: { 
         '-Lo7D2Y8ZVEXnJb5LMvd': { 
             name: 'Pan de molde',
             category: 'Molde' 
         },
         '-Lo7C4HAkeE0cssxg9E-': { 
             name: 'Bollo de Hamburguresa',
             category: 'Hamburguesa' 
         } 
     },
     category: { 
         Molde: { 
             '-Lo7D2Y8ZVEXnJb5LMvd': true 
         },
         Hamburguesa: { 
             '-Lo7C4HAkeE0cssxg9E-': true 
         } 
      } 
  }

Where the "title" are the categories keys and the "data" are the objects on the products branch. I have this function to receive the data and transform it:

   export default (props, storeName) => {
      firebase
        .database()
        .ref(`Store/${storeName}`)
        .on("value", function(snapshot) {
          if (snapshot.val() != null) {
            var values = snapshot.val() || {};
            var dataFormat = [];
            var x = 0;
            for (var i in values.category) {
              var data = Object.assign({
                data: [],
                index: x,
                category: i
              });
              dataFormat.push(data);
              x++;
}
        console.log("Data", dataFormat);
      }
    });
};

Currently the output is

[ 
    { data: [], index: 0, category: 'Molde' },
    { data: [], index: 1, category: 'Hamburguesa' } 
]

And the expected output will be:

[ 
  { 
    data: [
      {
       id: 'Lo7D2Y8ZVEXnJb5LMvd', 
       name: 'Pan de molde',
       category: 'Molde' 
      }
    ], 
    index: 0, 
    category: 'Molde' 
  },
  { 
    data: [
      { 
        id: '-Lo7C4HAkeE0cssxg9E-',
        name: 'Bollo de Hamburguresa',
        category: 'Hamburguesa' 
      }
    ], 
    index: 1, 
    category: 'Hamburguesa' 
  } 
]

How can I put the appropiate data in each section?

What is the expected output? How does the current output differ? You are assigning an empty array to data each time, the current index to index, and the category. That's all working just like it's written, what else needs to be in there? Are you trying to store something in that data array? — djs
– djs, Commented Sep 7, 2019 at 20:35
Where does the ID of a product come from? (Pan de molde has an ID of 0 in your expected output). — user4520
– user4520, Commented Sep 7, 2019 at 21:10
The data property has an id associated with it in the first object of the outer array, but not in the second. Is this correct? — djs
– djs, Commented Sep 7, 2019 at 21:19

user4520 · Accepted Answer · 2019-09-07 21:24:42Z

A few things:

you check whether snapshot.val() is != null, so there's no need to also do var values = snapshot.val() || {}; - you know it'll be truthy
Object.assign with an object literal is redundant, just use the literal
you're using ES6, you don't need to stick to var
replacing the for loop with a map would be more elegant
your input as posted in the question doesn't seem to contain product IDs anywhere, so I've skipped that here; if you update the question with more information, I'd be happy to account for that as well.

With that in mind, here's my suggestion:

export default (props, storeName) => {
  firebase
    .database()
    .ref(`Store/${storeName}`)
    .on("value", function(snapshot) {
      const values = snapshot.val();
      if (values) {
        const dataFormat = Object.keys(values.category)
          .map((category, index) => ({
            category,
            index,
            data: Object.values(values.products).filter(
              product => product.category === category
            )
          }));
        console.log("Data", dataFormat);
      }
    });
};

Collectives™ on Stack Overflow

How to transform JSON into an indexed array

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related