mapping items and flattening into single array in reactjs

Question

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

So, the issue hers is that docCalories contains array of strings instead of array of numbers? — palaѕн
– palaѕн, Commented Mar 29, 2020 at 16:07
@Dupocas your result gives me what I want in my console, but for some reason after I do this.setState({maxCalories: docCalories}) when I replace a line in my file data:[5345,1234,1122,1234,1234,1234,1234] with data:[this.maxCalories] I now get NaN — Geoff_S
– Geoff_S, Commented Mar 29, 2020 at 16:58

Edgar Henriquez · Accepted Answer · 2020-03-29 16:20:26Z

2

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)

answered Mar 29, 2020 at 16:20

Edgar Henriquez

1,3731 gold badge15 silver badges18 bronze badges

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

3 Comments

Geoff_S Over a year ago

your result gives me what I want in my console, but for some reason after I do this.setState({maxCalories: docCalories}) when I replace a line in my file data:[5345,1234,1122,1234,1234,1234,1234] with data:[this.maxCalories] I now get NaN

Edgar Henriquez Over a year ago

I don't understand what you're trying to say. You could ask another question and I'll try to help you there.

Geoff_S Over a year ago

that would be great thank you. It's here stackoverflow.com/questions/60920394/…

Tobias Boertz · Accepted Answer · 2020-03-29 16:22:32Z

0

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)

answered Mar 29, 2020 at 16:22

Tobias Boertz

4063 silver badges6 bronze badges

Comments

Durgesh · Accepted Answer · 2020-03-29 16:43:52Z

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

Collectives™ on Stack Overflow

mapping items and flattening into single array in reactjs

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related