CODEWITHSUNDEEP
javascriptarrays
Shravani
Shravani

Reputation: 1692

.map() is not a function

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": "[email protected]",
      "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
  },
  {
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "[email protected]",
      "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>`
})

Upvotes: 1

Views: 1257

Answers (5)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5031

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]

Upvotes: 0

varatharajan
varatharajan

Reputation: 239

let expenses = [{
    "user": {
        "id": "5bab847a5b0d2e2ce8b4cbe5",
        "name": "test_user",
        "email": "[email protected]",
        "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
},
{
    "user": {
        "id": "5bab847a5b0d2e2ce8b4cbe5",
        "name": "test_user",
        "email": "[email protected]",
        "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)

Upvotes: 0

Shyam Kumar
Shyam Kumar

Reputation: 158

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": "[email protected]",
          "username": "test"
        },
        "date": "07-Sep-2018",
        "expenseInfo": "Starbuck",
        "category": "Restaurants",
        "amount": 15
      },
      {
        "user": {
          "id": "5bab847a5b0d2e2ce8b4cbe5",
          "name": "test_user",
          "email": "[email protected]",
          "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>`
    })

Upvotes: 1

Vishal
Vishal

Reputation: 1

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

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

Upvotes: 0

Punith Mithra
Punith Mithra

Reputation: 628

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": "[email protected]",
      "username": "test"
    },
    "date": "07-Sep-2018",
    "expenseInfo": "Starbuck",
    "category": "Restaurants",
    "amount": 15
  },
  {
    "user": {
      "id": "5bab847a5b0d2e2ce8b4cbe5",
      "name": "test_user",
      "email": "[email protected]",
      "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>`
})

Upvotes: 0

Related Questions