.map() is not a function

Question

I am trying to extract date, expenseInfo, category and amount from the expenses array. But I am getting expenses.map() is not a function.

Below is the code.

Where am I going wrong?

let expenses = [{
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "test@gmail.com",
      "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
  },
  {
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "test@gmail.com",
      "username": "test"
    },
    "date": "01-Aug-2018",
    "expenseInfo": "Shopping",
    "category": "Michael Kors bag",
    "amount": 90
  }
];

let expensesData = [];
let expenses1 = [];
expensesData.push(expenses);

expenses1 = expensesData.map((expense, index) => {
  `<tr>
          <td>${expense[index].date}</td>
          <td>${expense[index].expenseInfo}</td>
          <td>${expense[index].category}</td>
          <td>${expense[index].amount}</td>
           </tr>`
})

You push the `expenses` array into another array (`expensesData`) and that's the one you call `map` on, but from the mapping function, I think you expect to call it on `expenses`... — sjahan, Oct 03 '18 at 05:18
There is no such error in the console when you run this code. Can you share more details? Probably you are running it on IE. — K K, Oct 03 '18 at 05:22
Do `console.log(expenses)` before `expenses.map()` and check the output... That will might help you and us also — Sivakumar Tadisetti, Oct 03 '18 at 05:27
I am getting this error in Chrome console. However not getting it in IDE.Not sure why — Shravani, Oct 03 '18 at 05:41
@ShravaniPL what is the log you are getting while doing `console.log(expenses)` — Sivakumar Tadisetti, Oct 03 '18 at 05:58
[{"user":{"id":"5bab847a5b0d2e2ce8b4cbe5","name":"test_user","email":"test@gmail.com","username":"test"},"date":"07-Sep-2018","expenseInfo":"Starbuck","category":"Restaurants","amount":15},{"user":{"id":"5bab847a5b0d2e2ce8b4cbe5","name":"test_user","email":"test@gmail.com","username":"test"},"date":"01-Aug-2018","expenseInfo":"Shopping","category":"Michael Kors bag","amount":90}]; — Shravani, Oct 03 '18 at 06:02
What is `console.log(typeof expensesData)` right after the `...push()` line — BruceWayne, Oct 03 '18 at 06:09
@ShravaniPL so you are getting JSON string, not an array, you need to do `JSON.parse(expenses);`, then `expenses.map()` works without any issues — Sivakumar Tadisetti, Oct 03 '18 at 06:32
@JavascriptLover-SKT Thanks for highlighting this... My mistake. I was using JSON.stringify (expenses) in some other method.Hence the issue — Shravani, Oct 03 '18 at 06:43
@ShravaniPL if that helps you glad. I also posted the answer. You can check and accept it — Sivakumar Tadisetti, Oct 03 '18 at 06:45

Shyam Kumar · Answer 1 · 2018-10-03T06:00:13.460

When you push expenses into expensesData, you get expenses at the 0th index. Either you ll need to avoid the push or try the code below

let expenses = [{
        "user": {
          "id": "5bab847a5b0d2e2ce8b4cbe5",
          "name": "test_user",
          "email": "test@gmail.com",
          "username": "test"
        },
        "date": "07-Sep-2018",
        "expenseInfo": "Starbuck",
        "category": "Restaurants",
        "amount": 15
      },
      {
        "user": {
          "id": "5bab847a5b0d2e2ce8b4cbe5",
          "name": "test_user",
          "email": "test@gmail.com",
          "username": "test"
        },
        "date": "01-Aug-2018",
        "expenseInfo": "Shopping",
        "category": "Michael Kors bag",
        "amount": 90
      }
    ];

    let expensesData = [];
    let expenses1 = [];
    expensesData.push(expenses);

    expenses1 = expensesData[0].map((expense, index) => {
      `<tr>
              <td>${expense.date}</td>
              <td>${expense.expenseInfo}</td>
              <td>${expense.category}</td>
              <td>${expense.amount}</td>
               </tr>`
    })

@ShravaniPL inside the dont use expense[index], just use expense.date — Shyam Kumar, Oct 03 '18 at 05:59
Thanks for the reply. I was using JSON.parse(expenses) which wasn't required at all. I have removed it and its working fine now — Shravani, Oct 03 '18 at 18:56

varatharajan · Answer 2 · 2018-10-03T06:37:11.490

0

let expenses = [{
    "user": {
        "id": "5bab847a5b0d2e2ce8b4cbe5",
        "name": "test_user",
        "email": "test@gmail.com",
        "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
},
{
    "user": {
        "id": "5bab847a5b0d2e2ce8b4cbe5",
        "name": "test_user",
        "email": "test@gmail.com",
        "username": "test"
    },
    "date": "01-Aug-2018",
    "expenseInfo": "Shopping",
    "category": "Michael Kors bag",
    "amount": 90
}
];

let expenses1 = [];
expenses1 = expenses.map((expense) => {
   return `<tr>
          <td>${expense.date}</td>
          <td>${expense.expenseInfo}</td>
          <td>${expense.category}</td>
          <td>${expense.amount}</td>
           </tr>`
})
console.log(expenses1)

edited Oct 03 '18 at 06:37

answered Oct 03 '18 at 05:28

varatharajan

229
2
15

If you want to verify the code, comment html code and add a console.log(expense.propertyName). then run and check it. – varatharajan Oct 03 '18 at 05:30
ok. I forget to add return statement. so that expenses1 variable will get value. – varatharajan Oct 03 '18 at 06:27
@ShravaniPL I have edited the code. Now expenses1 will have a returned value. – varatharajan Oct 03 '18 at 06:32
@ShravaniPL I removed index also which is not required. – varatharajan Oct 03 '18 at 06:37
Thanks for the reply. I was using JSON.parse(expenses) which wasn't required at all. I have removed it and its working fine now – Shravani Oct 03 '18 at 18:56

score 0 · Answer 3 · answered Oct 03 '18 at 05:33

I think you are trying to do this.

In a Map you need to return some value only then the expense1 array will have values else it will be populated with undefined.

let expenses = [{
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "test@gmail.com",
      "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
  },
  {
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "test@gmail.com",
      "username": "test"
    },
    "date": "01-Aug-2018",
    "expenseInfo": "Shopping",
    "category": "Michael Kors bag",
    "amount": 90
  }
];

let expensesData = [];
let expenses1 = [];
expensesData = [...expenses];

expenses1 = expensesData.map((expense, index) => {
  return `<tr>
          <td>${expense.date}</td>
          <td>${expense.expenseInfo}</td>
          <td>${expense.category}</td>
          <td>${expense.amount}</td>
           </tr>`
})

But according to my code expenses1 will definitely have values right? — Shravani, Oct 03 '18 at 05:58
Thanks for the reply. I was using JSON.parse(expenses) which wasn't required at all. I have removed it and its working fine now — Shravani, Oct 03 '18 at 18:56

score 0 · Answer 4 · answered Oct 03 '18 at 05:43

0

i Think you are trying to do this. it works for me

expenses1 = expensesData[0].map(function(expense, index){return yours statement here});

answered Oct 03 '18 at 05:43

Vishal

1
1

Thanks for the reply. I was using JSON.parse(expenses) which wasn't required at all. I have removed it and its working fine now – Shravani Oct 03 '18 at 18:56

Sivakumar Tadisetti · Accepted Answer · 2018-10-03T06:43:02.537

From the comment you posted what I observed is, you are getting expenses as JSON string not an array. You have to do JSON.parse(expenses), then everything works as expected

expenses = JSON.parse(expenses);

let result = expenses.map((expense, index) => {
  return `<tr>
          <td>${expense[index].date}</td>
          <td>${expense[index].expenseInfo}</td>
          <td>${expense[index].category}</td>
          <td>${expense[index].amount}</td>
           </tr>`
});

console.log(result);

You can check the difference between normal javascript object and JSON Object from below links

What is the difference between JSON and Object Literal Notation?

What are the differences between JSON and JavaScript object? [duplicate]

Thanks for the reply. Marked as answer – Shravani Oct 03 '18 at 18:54 — Shravani, Oct 03 '18 at 18:54

.map() is not a function

5 Answers5