Transform an array into an array of objects using the reduce method

Question

Transform an array into an array of objects using the reduce method

optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']

result = [
  {start: bengaluru, end: salem},
  {start: salem, end: erode},
  {start: erode, end: tiruppur},
  {start: tiruppur, end: coimbatore},
]

I am looking to transform the optimizedRoute array into the desired result using ES6's .reduce() method. Below is an attempt I made:

const r = optimizedRoute.reduce((places, place, i) => {
  const result: any = [];
  places = []
  places.push({
    startPlace: place,
    endPlace: place
  });
  // result.push ({ startplace, endplace, seats: 4 });
  // console.log(result);
  return places;
}, {});
console.log(r)

javascript arrays ecmascript-6

Answer 1

Answer №1

One way to extract the start and end parts of a route is by using the reduce method, where the end becomes the start for the next iteration.

getParts = a => (
    r => (
        a.reduce((start, end) => (
            r.push({ start, end }),
            end
        )),
        r
    )
)([]);

const getParts = a => (r => (a.reduce((start, end) => (r.push({ start, end }), end)), r))([]);

var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']

console.log(getParts(optimizedRoute));

.as-console-wrapper { max-height: 100% !important; top: 0; }

@EDIT Grégory NEUT adding explanation

// Two things to be aware of first:
// When no initial value is provided,
// Array.reduce takes the index 0 as the first value and starts looping from index 1

// Doing (x, y, z)
// Will execute the code x, y, and z

// Equivalent to:

// x;
// y;
// z;

let ex = 0;

console.log((ex = 2, ex = 5, ex = 3));

// Breaking down the code

const getParts = (a) => {
  const func = (r) => {
    a.reduce((start, end) => {
      console.log(start, end);

      r.push({
        start,
        end,
      });

      return end;
    });
    return r;
  };

  return func([]);
};

// Equivalent version
const getPartsEquivalent = (a) => {
  const r = [];
  
  a.reduce((start, end) => {
    console.log(start, end);
    
    r.push({
      start,
      end,
    });
    
    return end;
  });
  
  return r;
};

var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];

console.log(getPartsEquivalent(optimizedRoute));

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Answer 2

One way to extract the start and end parts of a route is by using the reduce method, where the end becomes the start for the next iteration.

getParts = a => (
    r => (
        a.reduce((start, end) => (
            r.push({ start, end }),
            end
        )),
        r
    )
)([]);

const getParts = a => (r => (a.reduce((start, end) => (r.push({ start, end }), end)), r))([]);

var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']

console.log(getParts(optimizedRoute));

.as-console-wrapper { max-height: 100% !important; top: 0; }

@EDIT Grégory NEUT adding explanation

// Two things to be aware of first:
// When no initial value is provided,
// Array.reduce takes the index 0 as the first value and starts looping from index 1

// Doing (x, y, z)
// Will execute the code x, y, and z

// Equivalent to:

// x;
// y;
// z;

let ex = 0;

console.log((ex = 2, ex = 5, ex = 3));

// Breaking down the code

const getParts = (a) => {
  const func = (r) => {
    a.reduce((start, end) => {
      console.log(start, end);

      r.push({
        start,
        end,
      });

      return end;
    });
    return r;
  };

  return func([]);
};

// Equivalent version
const getPartsEquivalent = (a) => {
  const r = [];
  
  a.reduce((start, end) => {
    console.log(start, end);
    
    r.push({
      start,
      end,
    });
    
    return end;
  });
  
  return r;
};

var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];

console.log(getPartsEquivalent(optimizedRoute));

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

Answer 3

Answer №2

If you're looking for a different technique, consider utilizing the map method along with slice. When using the map function, be sure to specify a callback function as an argument that will be executed on each item in your specified array.

optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']
var result = optimizedRoute
                .slice(0, -1)
                .map((item, index) => ({start : item, end : optimizedRoute[index + 1]}));
console.log(result);

Answer 4

If you're looking for a different technique, consider utilizing the map method along with slice. When using the map function, be sure to specify a callback function as an argument that will be executed on each item in your specified array.

optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']
var result = optimizedRoute
                .slice(0, -1)
                .map((item, index) => ({start : item, end : optimizedRoute[index + 1]}));
console.log(result);

Answer 5

Answer №3

I find the requirement of using "reduce" a bit confusing, as the code with a simple loop is clear and self-explanatory:

const optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
const result = new Array(optimizedRoute.length - 1);

for (let i = 0; i < result.length; ++i) {
  result[i] = {
    start: optimizedRoute[i],
    end: optimizedRoute[i + 1]
  };
}

console.log(result)

While it's fun to come up with clever solutions, sometimes simplicity is best compared to overly complex answers!

Answer 6

I find the requirement of using "reduce" a bit confusing, as the code with a simple loop is clear and self-explanatory:

const optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
const result = new Array(optimizedRoute.length - 1);

for (let i = 0; i < result.length; ++i) {
  result[i] = {
    start: optimizedRoute[i],
    end: optimizedRoute[i + 1]
  };
}

console.log(result)

While it's fun to come up with clever solutions, sometimes simplicity is best compared to overly complex answers!

Answer 7

Answer №4

Let's explore an example using the reduce method. However, some might argue that this approach may not be the most intuitive.

While some might find using reduce to be a bit excessive in scenarios where using an index seems more appropriate, I personally prefer a straightforward for loop.

const optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
let startCity;
const result = optimizedRoute.reduce((acc, city) => {
  if(startCity) {
    acc.push({start: startCity, end: city});
  }
  startCity = city;

  return acc;
}, []);

console.log(result);

Answer 8

Let's explore an example using the reduce method. However, some might argue that this approach may not be the most intuitive.

While some might find using reduce to be a bit excessive in scenarios where using an index seems more appropriate, I personally prefer a straightforward for loop.

const optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
let startCity;
const result = optimizedRoute.reduce((acc, city) => {
  if(startCity) {
    acc.push({start: startCity, end: city});
  }
  startCity = city;

  return acc;
}, []);

console.log(result);

Answer 9

Answer №5

Here is a solution using the reduce function:

let cities = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']
   
let routes = cities.reduce((accum, city, index)=>{
   if(index == cities.length - 1) 
      return accum;
   accum.push({start: city, end: cities[index+1]})
   return accum;
}, [])

console.log(routes);

Answer 10

Here is a solution using the reduce function:

let cities = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore']
   
let routes = cities.reduce((accum, city, index)=>{
   if(index == cities.length - 1) 
      return accum;
   accum.push({start: city, end: cities[index+1]})
   return accum;
}, [])

console.log(routes);

Answer 11

Answer №6

reduce isn't quite the right choice here since the goal isn't to condense the array into a single value.

In an ideal scenario, we would have a multi-array map option, commonly referred to as zip, that could be implemented like this:

const result = zipWith(optimisedRoute.slice(0, -1),
                       optimisedRoute.slice(1),
                       (start, end) => ({start, end}));

Unfortunately, such a feature doesn't exist in JavaScript. The next best approach is to use map on a range of indices within the route using Array.from:

const result = Array.from({length: optimisedRoute.length - 1}, (_, index) => {
     const start = optimisedRoute[index];
     const end = optimisedRoute[index + 1];
     return {start, end};
});

Answer 12

reduce isn't quite the right choice here since the goal isn't to condense the array into a single value.

In an ideal scenario, we would have a multi-array map option, commonly referred to as zip, that could be implemented like this:

const result = zipWith(optimisedRoute.slice(0, -1),
                       optimisedRoute.slice(1),
                       (start, end) => ({start, end}));

Unfortunately, such a feature doesn't exist in JavaScript. The next best approach is to use map on a range of indices within the route using Array.from:

const result = Array.from({length: optimisedRoute.length - 1}, (_, index) => {
     const start = optimisedRoute[index];
     const end = optimisedRoute[index + 1];
     return {start, end};
});

Answer 13

Answer №7

The code snippet below demonstrates the utilization of the Spread operator, Ternary operator, and Array.reduce.

const optimizedRoute = [
  'Bengaluru',
  'Salem',
  'Erode',
  'Tiruppur',
  'Coimbatore',
];

// Determining if we are at the last value in the array or not
// If it is the last value, return the constructed array
// If not, add a new value to the existing array.

// tmp represents the array being constructed
// x refers to the current loop item
// xi indicates the index of the current item
const lastItemIndex = optimizedRoute.length - 1;

const result = optimizedRoute.reduce((tmp, x, xi) => xi !== lastItemIndex ? [
  ...tmp,

  {
    start: x,
 
    // Accessing the next item by using the position of
    // the current item (xi)
    end: optimizedRoute[xi + 1],
  },
] : tmp, []);

console.log(result);

Answer 14

The code snippet below demonstrates the utilization of the Spread operator, Ternary operator, and Array.reduce.

const optimizedRoute = [
  'Bengaluru',
  'Salem',
  'Erode',
  'Tiruppur',
  'Coimbatore',
];

// Determining if we are at the last value in the array or not
// If it is the last value, return the constructed array
// If not, add a new value to the existing array.

// tmp represents the array being constructed
// x refers to the current loop item
// xi indicates the index of the current item
const lastItemIndex = optimizedRoute.length - 1;

const result = optimizedRoute.reduce((tmp, x, xi) => xi !== lastItemIndex ? [
  ...tmp,

  {
    start: x,
 
    // Accessing the next item by using the position of
    // the current item (xi)
    end: optimizedRoute[xi + 1],
  },
] : tmp, []);

console.log(result);

Answer 15

Answer №8

In my simplified version of Nina Scholz's solution, I have implemented her idea of using reduce to extract the start and end parts of a route, returning the end as the next start.

getRouteParts = routes => {
  const result = [];
    routes.reduce((start, end) => {
      result.push({ start, end });
      return end;
    });
    return result;
};
var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
console.log(this.getRouteParts(optimizedRoute));

Answer 16

In my simplified version of Nina Scholz's solution, I have implemented her idea of using reduce to extract the start and end parts of a route, returning the end as the next start.

getRouteParts = routes => {
  const result = [];
    routes.reduce((start, end) => {
      result.push({ start, end });
      return end;
    });
    return result;
};
var optimizedRoute = ['Bengaluru', 'Salem', 'Erode', 'Tiruppur', 'Coimbatore'];
console.log(this.getRouteParts(optimizedRoute));

Answer 17

Answer №9

Prioritizing readability is more important to me than opting for concise code that simply gets the job done

When working with optimizedRoute, I like to use this function to enhance clarity and organization:

Also, while a shorter solution may save space, it can sacrifice readability in my opinion. Consider this alternative approach:

With optimizedRoute, I find it helpful to utilize the following method for improved understanding:

Answer 18

Prioritizing readability is more important to me than opting for concise code that simply gets the job done

When working with optimizedRoute, I like to use this function to enhance clarity and organization:

Also, while a shorter solution may save space, it can sacrifice readability in my opinion. Consider this alternative approach:

With optimizedRoute, I find it helpful to utilize the following method for improved understanding:

Answer 19

Answer №10

Here is a solution using the ReduceRight method.

optimizedRoute.reduceRight((acc, d, i, arr) => 
             i == 0 
                ? acc 
                : [{ start: arr[i -1], end: d }, ...acc]  
            , [])

Answer 20

Here is a solution using the ReduceRight method.

optimizedRoute.reduceRight((acc, d, i, arr) => 
             i == 0 
                ? acc 
                : [{ start: arr[i -1], end: d }, ...acc]  
            , [])

Transform an array into an array of objects using the reduce method

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Similar questions

How can I apply JavaScript to aggregate child node values and assign them to the parent in JSON data format?

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

What steps do I need to take to execute a browserify-ed application in NodeJS?

Retrieve information from the JSON output

Issues encountered when trying to execute npm start: "The function this.htmlWebpackPlugin.getHooks is not recognized."

Showing JSON information in an Angular application

Clicked button redirects user to the parent URL

Creating methods in Vue that can alter elements created during the mounted lifecycle hook can be achieved by defining functions

Will a notification box appear upon submission indicating success or failure?

What is the method to adjust the anchor point for a MUI popover?

Exploring the Power of 2D Arrays in JavaScript

Display a loading GIF for every HTTP request made in Angular 4

XMLHttpRequest request shows blank result

Searching for the name of dynamically generated input fields using jQuery

"Why is it that the keypress event doesn't function properly when using the on() method

Is it possible for Angular to perform bidirectional data binding in reverse between two input fields?

Implementing group validation with Angular

Leveraging the power of AngularJS to run JavaScript functions saved as strings

What could be causing the malfunction of my token rotation feature in nextAuth?