CODEWITHSUNDEEP
javascriptarraysstringobject
Karla Jensen
Karla Jensen

Reputation: 57

How to turn an array of objects into a (larger) array of strings?

I have this array of objects that I want to turn into an array of strings. Is there a simple way to do it? 

var obj = [
  {firstName: "Daniel", lastName: "James"},
  {firstName: "Laura", lastName: "Murray"}
];

To

var obj = ["Daniel", "James", "Laura", "Murray"]

Upvotes: 2

Views: 233

Answers (2)

zer00ne
zer00ne

Reputation: 43870

It appears that an array of all values is the objective.

This is the structure of an array of objects:

let data = [ //(begin array)
  { //(begin first object)
    firstName: /*(key or property)*/ "Jon", /*(VALUE) what you want*/
    lastName: /*(key or property)*/ "Doe" /*(VALUE) what you want*/
  }, //(end first object)
  //... (more objects, etc)
]; //(end array)
  1. Apply .flatMap() method which is .map() and .flat() combined
    • It runs a function on each object then flattens the return if it is an array

  2. The callback function within .flatMap() should be able to extract the values from each object within the array of objects.

    • For this phase use Object.values() which returns an array of values of a given object.

  3. Each method returns a result as follows:

    1. Object.values() each return will be from: {key1: "value1", key2: "value2"} to ["value1", "value2"]
    2. If .map() was used then the final return would be: [["value1", "value2"], ...] an array of arrays.
    3. If .flat() was applied to the result of #2 the return would be: ["value1", "value2", ...]
    4. .flatMap() does both #2 and #3.

The demo below features a custom function: getvalues(). Pass in an array of objects and it returns an array of all the values of each object. The advantage using this function over other code used in the other answers is that the actual key (aka property) doesn't have to be known and the amount of key/value pairs within each object doesn't matter. So an input of:

let data = [
  {firstName: "Jon", lastName: "Doe", age: 30}, 
  {first: "Jane", last: "Doe"}, 
  {color: "green"}
];

is valid as well.

Demo

let data = [
  {first: "Daniel", last: "James"},
  {first: "Laura", last: "Murray"}
];

const getValues = arrayOfObjects => arrayOfObjects.flatMap(object => Object.values(object));

console.log(getValues(data));

Upvotes: 0

customcommander
customcommander

Reputation: 18891

You can create a new list by mapping a function over each item of a list.

Example: y is created by mapping n => n + 1 over each item of x:

const x = [10, 20, 30];
const y = x.map(n => n + 1);

x;
//=> [10, 20, 30]

y;
//=> [11, 21, 31]

You can also turn a list of things into a list of other things: x is a list of numbers and y is a list of strings.

const x = [1, 2, 3];
const y = x.map(n => '🌯'.repeat(n));

y;
//=> ["🌯", "🌯🌯", "🌯🌯🌯"]

In your case you need to turn a list of n objects into a list of n × 2 strings. (Each object "producing" two strings; a first name and a last name)

For this we need to use Array#flatMap which map a function over each item of a list and flatten the result of the function into the new list.

A simple example will make this all clear:

const x = ['🌯', '🥑'];
const y = x.flatMap(n => [n, n]);

y;
//=> ["🌯", "🌯", "🥑", "🥑"]

Now let's solve your issue!

const y = x.flatMap(({firstName, lastName}) => [firstName, lastName]);

console.log(y);
<script>
const x =
  [ { firstName: "Daniel"
    , lastName: "James"
    }
    ,
    { firstName: "Laura"
    , lastName: "Murray"
    }
  ];
</script>

Upvotes: 1

Related Questions