CODEWITHSUNDEEP
javascriptreactjs
Geoff_S
Geoff_S

Reputation: 5107

mapping items and flattening into single array in reactjs

Currently I have a reactjs function that simply queries a pouchDB document, gets 7 records and then I'm trying to flatten those records in order to store in state. The problem is that, right now when I console.log docCalories I get this:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0: {caloriesBurned: "5345", createdAt: "2020-03-28T05:15:24.369Z"}
  1: {caloriesBurned: "1234", createdAt: "2020-03-28T10:39:16.901Z"} 
  2: {caloriesBurned: "1122", createdAt: "2020-03-28T10:32:03.100Z"}
  3: {caloriesBurned: "1234", createdAt: "2020-03-28T05:16:54.846Z"}
  4: {caloriesBurned: "1234", createdAt: "2020-03-28T10:21:31.092Z"}
  5: {caloriesBurned: "1234", createdAt: "2020-03-28T05:08:00.791Z"}
  6: {caloriesBurned: "1234", createdAt: "2020-03-28T05:07:35.940Z"}
  length: 7__proto__: Array(0)

but I want to get something that looks like this:

map: [5345,1234,1122,1234,1234,1234,1234]

So basically one object that contains the 7 numbers from each doc's caloriesBurned value

What am I doing wrong here and how can I properly put these into one array/object?

      setMax = () => {
    this.state.caloriesDB.db.find({
      selector: {
        $and: [
          {_id: {"$gte": null}},
          {caloriesBurned: {$exists: true}},
          {createdAt: {$exists: true}}
        ]
      },
      fields: ['caloriesBurned', 'createdAt'],
      sort: [{'_id':'desc'}],
      limit: 7
    }).then(result => {

      const newDocs = result.docs;
      const docCalories = newDocs.map((caloriesBurned) => caloriesBurned)

      console.log('this is map');
      console.log(docCalories);

    }).catch((err) =>{
      console.log(err);
    });
  }

Upvotes: 1

Views: 58

Answers (3)

Durgesh
Durgesh

Reputation: 205

considering docCalories value in m2 by creating map, you can do something like this - 

const m2 = new Map(Object.entries([{
        0: {
            caloriesBurned: "5345",
            createdAt: "2020-03-28T05:15:24.369Z"
        }
    },
    {
        1: {
            caloriesBurned: "1234",
            createdAt: "2020-03-28T10:39:16.901Z"
        }
    },
    {
        2: {
            caloriesBurned: "1122",
            createdAt: "2020-03-28T10:32:03.100Z"
        }
    },
    {
        3: {
            caloriesBurned: "1234",
            createdAt: "2020-03-28T05:16:54.846Z"
        }
    },
    {
        4: {
            caloriesBurned: "1234",
            createdAt: "2020-03-28T10:21:31.092Z"
        }
    },
    {
        5: {
            caloriesBurned: "1234",
            createdAt: "2020-03-28T05:08:00.791Z"
        }
    },
    {
        6: {
            caloriesBurned: "1234",
            createdAt: "2020-03-28T05:07:35.940Z"
        }
    }
]))
var store = [];

Array.from(m2).map(([key, value]) => store.push(value[key].caloriesBurned));
console.log(store);

Upvotes: 0

Tobias Boertz
Tobias Boertz

Reputation: 396

What Dupocas has written in the comments is correct.

newDocs is a list of objects and with this code:

const docCalories = newDocs.map((caloriesBurned) => caloriesBurned)

you will just get another list that is just like newDocs. What you want to return from the map function is a specific key, so try:

const docCalories = newDocs.map(doc => doc.caloriesBurned)

Upvotes: 0

Edgar Henriquez
Edgar Henriquez

Reputation: 1383

You're returning the entire object in your map function, instead you should only send the caloriesBurned property.

const docCalories = newDocs.map((data) => data.caloriesBurned)

or if you like, we can destructrure data and have

const docCalories = newDocs.map(({caloriesBurned}) => caloriesBurned)

Upvotes: 2

Related Questions