Unpack and retrieve multiple values

Question

Unpack and retrieve multiple values

Currently diving into the world of JavaScript and exploring destructuring. My goal is to display the following in the console:

"Name: Mike Smith, Father: Harry Smith"

"Name: Tom Jones, Father: Richard Jones"

Encountering an error message stating n is not defined, even though it should be fine? Here's the code snippet I've been working on:

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

const kalle= people.map(( {name: n, family: {father: f}})=> { 
return [n,f]
});
  
console.log('Name: ' + n + ', Father: ' + f);

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

javascript arrays object destructuring map-function

Answer 1

Answer №1

n and f are located outside the function, meaning they cannot be accessed directly. Instead, loop over the array to access them.

When destructuring objects, a key is not necessary unless the value itself is an object.

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

// Returns an array
const persons = people.map(({name, family: {father}})=> { 
  return [name, father];
});

// Log each person
persons.forEach(([name, father]) => {
  console.log(`Name: ${name}, Father: ${father}`);
});

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Answer 2

n and f are located outside the function, meaning they cannot be accessed directly. Instead, loop over the array to access them.

When destructuring objects, a key is not necessary unless the value itself is an object.

const people = [
  {
    name: 'Mike Smith',
    family: {
      mother: 'Jane Smith',
      father: 'Harry Smith',
      sister: 'Samantha Smith'
    },
    age: 35
  },
  {
    name: 'Tom Jones',
    family: {
      mother: 'Norah Jones',
      father: 'Richard Jones',
      brother: 'Howard Jones'
    },
    age: 25
  }
];

// Returns an array
const persons = people.map(({name, family: {father}})=> { 
  return [name, father];
});

// Log each person
persons.forEach(([name, father]) => {
  console.log(`Name: ${name}, Father: ${father}`);
});

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Answer 3

Answer №2

Using a simple join function can give you the result you're looking for.

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
]

const kalle = people
  .map(({ name: n, family: { father: f } }) => {
    return "Name: " + n + ", Father: " + f
  })
  .join("\n")

console.log(kalle)

Answer 4

Using a simple join function can give you the result you're looking for.

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
]

const kalle = people
  .map(({ name: n, family: { father: f } }) => {
    return "Name: " + n + ", Father: " + f
  })
  .join("\n")

console.log(kalle)

Unpack and retrieve multiple values

Answer №1

Answer №2

Similar questions

Draggable HighStock element causing issues with Gridster dragging

Submitting content to numerous webpages

Capturing link titles for control navigation in Nivo Slider

Click on the React interface to add the elements to an array

Issue with VueJS instance: Unable to prevent default behavior of an event

what is the best way to center list items in material ui?

Amend and refresh information using AJAX technology

Retrieving a file URL from Sanity within a blocks array

Is there a way to automatically fill in a text field when an option is chosen from a dropdown menu populated with a list of objects?

What is the simplest way to transform a JSON containing strings into a JSON with arrays?

Determine the maximum value in an array using recursive Java function

Using Jquery to assign negative values in CSS styling

Combining JSON array objects in Vanilla Javascript to create a nested array based on a shared value

What steps do I need to take to create an animation where an outline gradually becomes filled in

Exploring Array/Json Objects with PHP: A Guide to Iterating Through

Experiencing difficulties when establishing a connection between MongoDB and Node.js

Encountering an error while trying to install with npm: getting an error message that says "Cannot read property '

Updating values using events within a v-for loop in a Vue template: A step-by-step guide

Error message occurs when attempting to access an array generated from JSON data

What is the best way to access and utilize variables passed in an app.post request within another app.post request using Node.js