JavaScript: Convert nested array values in object to a flat structure

Question

JavaScript: Convert nested array values in object to a flat structure

Is there a way to flatten any array values within an object in JavaScript, not limited to just ecommerce? For example:

var sample = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [
      {
        brand: "apple",
        category: "phone"
      },
      {
        brand: "google",
        category: "services"
      }
    ]
  }
};

I want the output to be:

{
  price: "999",
  description: "..."
  ecommerce: {
    products_1: {
      brand: "apple",
      category: "phone"
    },
    products_2: {
      brand: "google",
      category: "services"
    }
  }
}

What is the most efficient way to achieve this using JavaScript (ES6/7)?

Thank you!

Note: I've tried a solution but it's not working as expected. Is there a better functional approach to this?

function flattenArray(array) {

  var obj = array.reduce((acc, cur, i) => {
    acc[i] = cur;
    return acc;
  }, {});

  return obj;
}

function cleanObject(object) {
  for (let key in object) {
    let testObject = object[key];

    if (Array.isArray(testObject)) {
      testObject = flattenArray(testObject)
    } else if (typeof(testObject) === 'object') {
      testObject = cleanObject(testObject);
    }

    return testObject;
  }

  return object;
}

var clean = cleanObject(sample);

UPDATE: What if the object is structured like this:

var sample = {
  price: "999",
  description: "...",
  differentArray: [ 
    {
      brand: "apple",
      category: "phone"
    },
    {
      brand: "google",
      category: "services"
    }
  ]
};

This time the array is under a different key and nested at a different level.

javascript arrays recursion data-structures mapreduce

Answer 1

Answer №1

An iterative implementation using the Array#reduce method is effective for handling key-value bags of this nature. A generic solution may take the following form:

function recursivelyMapArrayItemsToGenericKeys(collector, key) {
  var
    source  = collector.source,
    target  = collector.target,
    type    = source[key];

  if (Array.isArray(type)) {
    type.forEach(function (item, idx) {
      var
        keyList     = Object.keys(item || ''),
        genericKey  = [key, idx].join('_');

      if (keyList.length >= 1) {
        target[genericKey] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

          source: item,
          target: {}

        }).target;
      } else {
        target[genericKey] = item;
      }
    });
  } else if (typeof type !== 'string') {
    var keyList = Object.keys(type || '');

    if (keyList.length >= 1) {
      target[key] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

        source: type,
        target: {}

      }).target;
    } else {
      target[key] = type;
    }
  } else {
    target[key] = type;
  }
  return collector;
}

var sample = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [{
      brand: "apple",
      category: "phone"
    }, {
      brand: "google",
      category: "services"
    }, {
      foo: [{
        brand: "bar",
        category: "biz"
      }, {
        brand: "baz",
        category: "biz"
      }]
    }]
  }
};

var result = Object.keys(sample).reduce(recursivelyMapArrayItemsToGenericKeys, {

  source: sample,
  target: {}

}).target;

console.log('sample : ', sample);
console.log('result : ', result);

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

During a subsequent code refactoring phase, redundant logic can be removed with two separate functions and alternating recursive calls.

function recursivelyAssignItemsFromTypeByKeys(target, type, keyList, key) {
  if (keyList.length >= 1) {
    target[key] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

      source: type,
      target: {}

    }).target;
  } else {
    target[key] = type;
  }
}

function recursivelyMapArrayItemsToGenericKeys(collector, key) {
  var
    source  = collector.source,
    target  = collector.target,
    type    = source[key];

  if (Array.isArray(type)) {
    type.forEach(function (item, idx) {
      var
        keyList     = Object.keys(item || ''),
        genericKey  = [key, idx].join('_');

      recursivelyAssignItemsFromTypeByKeys(target, item, keyList, genericKey);
    });
  } else if (typeof type !== 'string') {
    var keyList = Object.keys(type || '');

    recursivelyAssignItemsFromTypeByKeys(target, type, keyList, key);
  } else {
    target[key] = type;
  }
  return collector;
}

var sample = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [{
      brand: "apple",
      category: "phone"
    }, {
      brand: "google",
      category: "services"
    }, {
      foo: [{
        brand: "bar",
        category: "biz"
      }, {
        brand: "baz",
        category: "biz"
      }]
    }]
  }
};

var result = Object.keys(sample).reduce(recursivelyMapArrayItemsToGenericKeys, {

  source: sample,
  target: {}

}).target;

console.log('sample : ', sample);
console.log('result : ', result);

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

Answer 2

An iterative implementation using the Array#reduce method is effective for handling key-value bags of this nature. A generic solution may take the following form:

function recursivelyMapArrayItemsToGenericKeys(collector, key) {
  var
    source  = collector.source,
    target  = collector.target,
    type    = source[key];

  if (Array.isArray(type)) {
    type.forEach(function (item, idx) {
      var
        keyList     = Object.keys(item || ''),
        genericKey  = [key, idx].join('_');

      if (keyList.length >= 1) {
        target[genericKey] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

          source: item,
          target: {}

        }).target;
      } else {
        target[genericKey] = item;
      }
    });
  } else if (typeof type !== 'string') {
    var keyList = Object.keys(type || '');

    if (keyList.length >= 1) {
      target[key] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

        source: type,
        target: {}

      }).target;
    } else {
      target[key] = type;
    }
  } else {
    target[key] = type;
  }
  return collector;
}

var sample = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [{
      brand: "apple",
      category: "phone"
    }, {
      brand: "google",
      category: "services"
    }, {
      foo: [{
        brand: "bar",
        category: "biz"
      }, {
        brand: "baz",
        category: "biz"
      }]
    }]
  }
};

var result = Object.keys(sample).reduce(recursivelyMapArrayItemsToGenericKeys, {

  source: sample,
  target: {}

}).target;

console.log('sample : ', sample);
console.log('result : ', result);

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

During a subsequent code refactoring phase, redundant logic can be removed with two separate functions and alternating recursive calls.

function recursivelyAssignItemsFromTypeByKeys(target, type, keyList, key) {
  if (keyList.length >= 1) {
    target[key] = keyList.reduce(recursivelyMapArrayItemsToGenericKeys, {

      source: type,
      target: {}

    }).target;
  } else {
    target[key] = type;
  }
}

function recursivelyMapArrayItemsToGenericKeys(collector, key) {
  var
    source  = collector.source,
    target  = collector.target,
    type    = source[key];

  if (Array.isArray(type)) {
    type.forEach(function (item, idx) {
      var
        keyList     = Object.keys(item || ''),
        genericKey  = [key, idx].join('_');

      recursivelyAssignItemsFromTypeByKeys(target, item, keyList, genericKey);
    });
  } else if (typeof type !== 'string') {
    var keyList = Object.keys(type || '');

    recursivelyAssignItemsFromTypeByKeys(target, type, keyList, key);
  } else {
    target[key] = type;
  }
  return collector;
}

var sample = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [{
      brand: "apple",
      category: "phone"
    }, {
      brand: "google",
      category: "services"
    }, {
      foo: [{
        brand: "bar",
        category: "biz"
      }, {
        brand: "baz",
        category: "biz"
      }]
    }]
  }
};

var result = Object.keys(sample).reduce(recursivelyMapArrayItemsToGenericKeys, {

  source: sample,
  target: {}

}).target;

console.log('sample : ', sample);
console.log('result : ', result);

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

Answer 3

Answer №2

My plan of action would be:

const data = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [
      {
        brand: "apple",
        category: "phone"
      },
      {
        brand: "google",
        category: "services"
      }
    ]
  }
}

data.ecommerce.products.forEach((product, index) => {
  data.ecommerce['products_' + index] = product
})

delete data.ecommerce.products

console.log(data)

Answer 4

My plan of action would be:

const data = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [
      {
        brand: "apple",
        category: "phone"
      },
      {
        brand: "google",
        category: "services"
      }
    ]
  }
}

data.ecommerce.products.forEach((product, index) => {
  data.ecommerce['products_' + index] = product
})

delete data.ecommerce.products

console.log(data)

Answer 5

Answer №3

Easily transform the ecommerce array by using the reduce method and destructuring each element as needed.

const data = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [
      {
        brand: "apple",
        category: "phone"
      },
      {
        brand: "google",
        category: "services"
      }
    ]
  }
}

const flattenAndRename = (arr, key) =>
  arr.reduce((prev, curr, index) => {
    return {
      ...prev,
      [`${key}_${index + 1}`]: curr,
    }
  }, {})
  
const modifiedData = {
  ...data,
  ecommerce: flattenAndRename(data.ecommerce.products, 'products'),
}

console.log(modifiedData)

Answer 6

Easily transform the ecommerce array by using the reduce method and destructuring each element as needed.

const data = {
  price: "999",
  description: "...",
  ecommerce: {
    products: [
      {
        brand: "apple",
        category: "phone"
      },
      {
        brand: "google",
        category: "services"
      }
    ]
  }
}

const flattenAndRename = (arr, key) =>
  arr.reduce((prev, curr, index) => {
    return {
      ...prev,
      [`${key}_${index + 1}`]: curr,
    }
  }, {})
  
const modifiedData = {
  ...data,
  ecommerce: flattenAndRename(data.ecommerce.products, 'products'),
}

console.log(modifiedData)

JavaScript: Convert nested array values in object to a flat structure

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to determine if a user is actively reading a page using Javascript?

Using Javascript to extract a custom attribute from a button element

What is the best way to add a picture using React and Next.js?

Mastering state transitions in Angular JS

Preventing Repeated Clicks in AngularJS

Steps to store user input into an array and subsequently combine the stored input:

Parsing improperly formatted JSON from an HTTP GET request can be done using either AngularJS or JQuery

Retrieving Information from API using Vue.js

Getting undefined while trying to iterate through data on a next js page using getStaticProps. What could be causing this issue?

How can you assign a strokeStyle color to a Canvas using a CSS property?

Divide the number by the decimal point and then send it back as two distinct parts

What is the common approach for directing a setState Redux action?

One way to display GIFs sequentially without preloading them is by using JavaScript

Switch the position of the Refer a friend button and the name button to the right

Can Javascript (PWA) be used to detect fake GPS or mock GPS in applications?

Canceling a window in JSP and navigating back to the previous page using JavaScript

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

Going back to the beginning of a for loop in the C programming language

Changing the color variable of an object using an onClick function in JavaScript

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table