Problem encountered when utilizing map() function - it returns undefined

Question

Problem encountered when utilizing map() function - it returns undefined

const items = [
  { item: "apple", cost: 2 },
  { item: "orange", cost: 4 },
  { item: "carrot", cost: "" },
  { item: "grapes", cost: 5 },
  { item: "milk", cost: 3 },
  { item: "bread", cost: " " },
];

const pricesByItem = function (array) {
  array.map((elem) => {
    let result = {};
    result[elem.item] = elem.cost;
    return result;
  });
};

console.log(pricesByItem(items))

Hey there, I'm attempting to use map() to match each item in the array with its respective cost, but the function is giving me undefined as output.

I've tried debugging my code and noticed that the output variable holds values while going through the array, however, it ultimately returns undefined. I'm fairly new to programming and can't figure out the reason behind this issue. Thanks for your help!

javascript arrays undefined

Answer 1

Answer №1

Your code has been successfully fixed and is functioning correctly in my browser. Here is the modified version:

const items = [
  { item: "apple", cost: 2 },
  { item: "orange", cost: 4 },
  { item: "tomato", cost: "" },
  { item: "pineapple", cost: 5 },
  { item: "milk", cost: 3 },
];

const itemsByCost = function (arr) {
  let output = {};
  arr.map((i) => {
    output[i.item] = i.cost;
  });
  return output;
};
console.log(itemsByCost(items))

I made a small adjustment by relocating the return statement outside of the map function and moving the output variable declaration before it. I trust this resolves your query.

Answer 2

Your code has been successfully fixed and is functioning correctly in my browser. Here is the modified version:

const items = [
  { item: "apple", cost: 2 },
  { item: "orange", cost: 4 },
  { item: "tomato", cost: "" },
  { item: "pineapple", cost: 5 },
  { item: "milk", cost: 3 },
];

const itemsByCost = function (arr) {
  let output = {};
  arr.map((i) => {
    output[i.item] = i.cost;
  });
  return output;
};
console.log(itemsByCost(items))

I made a small adjustment by relocating the return statement outside of the map function and moving the output variable declaration before it. I trust this resolves your query.

Answer 3

Answer №2

This code snippet demonstrates a clever use of the Object.fromEntries() method (check out the documentation) which allows you to generate an object from an array of key-value pairs.

const items = [
  { item: "phone", price: 500 },
  { item: "laptop", price: 1200 },
  { item: "mouse", price: 50 },
];

const itemsByPrice = arr => {
  return Object.fromEntries(
    arr.map(({item, price}) => [item, price])
  );
};
console.log(itemsByPrice(items))

Answer 4

This code snippet demonstrates a clever use of the Object.fromEntries() method (check out the documentation) which allows you to generate an object from an array of key-value pairs.

const items = [
  { item: "phone", price: 500 },
  { item: "laptop", price: 1200 },
  { item: "mouse", price: 50 },
];

const itemsByPrice = arr => {
  return Object.fromEntries(
    arr.map(({item, price}) => [item, price])
  );
};
console.log(itemsByPrice(items))

Answer 5

Answer №3

Consider utilizing the reduce method to accomplish your goal

const items = [
    { item: "apple", cost: 2 },
    { item: "pear", cost: 4 },
    { item: "carrot", cost: " " },
    { item: "grapes", cost: 5 },
    { item: "milk", cost: 3 },
    { item: "eggs", cost: "" },
];

const itemsByCost = function (array) {
   return array.reduce((accumulator, element) => {
       accumulator[element.item] = element.cost;
       return accumulator;
   }, {});
};

console.log(itemsByCost(items))

Answer 6

Consider utilizing the reduce method to accomplish your goal

const items = [
    { item: "apple", cost: 2 },
    { item: "pear", cost: 4 },
    { item: "carrot", cost: " " },
    { item: "grapes", cost: 5 },
    { item: "milk", cost: 3 },
    { item: "eggs", cost: "" },
];

const itemsByCost = function (array) {
   return array.reduce((accumulator, element) => {
       accumulator[element.item] = element.cost;
       return accumulator;
   }, {});
};

console.log(itemsByCost(items))

Problem encountered when utilizing map() function - it returns undefined

Answer №1

Answer №2

Answer №3

Similar questions

Sorting through items based on several URL parameters

Rearrange table cells effortlessly with automatic saving functionality

Incorporating dynamic JavaScript animations with immersive 360-degree images

The Angular Material datepicker seems to be ignoring the limitations set by [min] and [max] restrictions

AJAX chat application's updating frequency

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

Can we create a process that automatically transforms any integer field into a hashed string?

Deactivate additional fields when choosing an option from the drop-down selection menu

Unleashing the Power of Google Apps Script Filters

The results returned by the jQuery find() function vary across various pages

Discovering repeated values and verifying the value range within table columns can be achieved through the use

Utilizing jQuery to dynamically add classes

Exploring AngularJS testing using Protractor's browser.wait() method

Converting JavaScript code for Angular: A step-by-step guide

Implementing JSON responses in Express JS

Utilizing Stored Variables and Random Numbers in Selenium IDE

What is the best method for validating a div element using Angular UI Bootstrap?

Error encountered when using strcpy() with a character array member in a struct causing a segmentation fault

Load data asynchronously using a promise in select2

Dynamically loading iframes with JQuery