Tips for dynamically changing the object based on the value type in JavaScript

Question

Tips for dynamically changing the object based on the value type in JavaScript

How can I transform a nested object into a new object using JavaScript?

I have an object obj where if the details property is an array, I want to use the first value of the array as the value in JavaScript.

function transformObject(obj) {
  let map = {};
  obj.forEach(e => {
    let details = e.details;
    Object.values(details).forEach(value => {
      if (Array.isArray(value) && value.length > 0) {
        map[value[0]] = value[0];
      }
      else if (typeof value === 'object') {
        Object.values(value).forEach(val => { map[val] = val; });
      }
    })
  });
  return map;
}

var obj1 = [
  {
    details : {
      "info"  : ["stocks", "finance", ""],
      "sales" : ["analytics"]
    }
  }
];
var obj2 = [
  {
    details : {
      "city" : "SG"
    }
  }
];
var result1 = this.transformObject(obj1);
var result2 = this.transformObject(obj2);

Expected Output

// for obj1 (show only the first value from each array)
{
  info  : "stocks",
  sales : "analytics"
}
// for obj2
{
  city : "SG"
}

javascript arrays object

Answer 1

Answer №1

It seems like you may have made this more complex than necessary. Take a look at the following illustration for clarification. The process can be summarized as follows:

Go through each details key
If the value associated with the key is an array, create the key in the map and set its value to the first element of the array
If the value associated with the key is not an array, simply copy it over to the map

With these steps, you should be able to attain your desired outcome.

function generateNewObject(obj){
  let map = {};
  obj.forEach(item => {
    let details = item.details;
    Object.keys(details).forEach(key => {
      var value = details[key];
      if (Array.isArray(value) && value.length > 0){
        map[key] = value[0];
      } else {
        map[key] = value;
      }
    });
  });
  return map;
}

var object1 = [
  {
    details: {
      "product":["electronics","technology",""],
      "service":["maintenance"]
    }
  }
];

var object2 = [
  {
    details: {
        "country":"US"
    }
  }
];

var result1 = generateNewObject(object1);
var result2 = generateNewObject(object2);

console.log(result1);
console.log(result2);

Answer 2

It seems like you may have made this more complex than necessary. Take a look at the following illustration for clarification. The process can be summarized as follows:

Go through each details key
If the value associated with the key is an array, create the key in the map and set its value to the first element of the array
If the value associated with the key is not an array, simply copy it over to the map

With these steps, you should be able to attain your desired outcome.

function generateNewObject(obj){
  let map = {};
  obj.forEach(item => {
    let details = item.details;
    Object.keys(details).forEach(key => {
      var value = details[key];
      if (Array.isArray(value) && value.length > 0){
        map[key] = value[0];
      } else {
        map[key] = value;
      }
    });
  });
  return map;
}

var object1 = [
  {
    details: {
      "product":["electronics","technology",""],
      "service":["maintenance"]
    }
  }
];

var object2 = [
  {
    details: {
        "country":"US"
    }
  }
];

var result1 = generateNewObject(object1);
var result2 = generateNewObject(object2);

console.log(result1);
console.log(result2);

Answer 3

Answer №2

Check out this concise solution that utilizes destructuring assignments:

function createNewObject(obj) {
    const [{ details }] = obj;
    const entries = Object.entries(details)
        .map(([key, value]) => ([key, Array.isArray(value) ? value[0] : value]));
    return Object.fromEntries(entries);
}

See it in action below:

'use strict';

function createNewObject(obj) {
    const [{ details }] = obj;
    const entries = Object.entries(details)
        .map(([key, value]) => ([key, Array.isArray(value) ? value[0] : value]));
    return Object.fromEntries(entries);
}

const obj1 = [
    {
        details: {
            info: ['stocks', 'finance', ''],
            sales: ['analytics']
        }
    }
];

const obj2 = [
    {
        details: {
            city: 'SG'
        }
    }
];

console.log(createNewObject(obj1));
console.log(createNewObject(obj2));

Answer 4

Check out this concise solution that utilizes destructuring assignments:

function createNewObject(obj) {
    const [{ details }] = obj;
    const entries = Object.entries(details)
        .map(([key, value]) => ([key, Array.isArray(value) ? value[0] : value]));
    return Object.fromEntries(entries);
}

See it in action below:

'use strict';

function createNewObject(obj) {
    const [{ details }] = obj;
    const entries = Object.entries(details)
        .map(([key, value]) => ([key, Array.isArray(value) ? value[0] : value]));
    return Object.fromEntries(entries);
}

const obj1 = [
    {
        details: {
            info: ['stocks', 'finance', ''],
            sales: ['analytics']
        }
    }
];

const obj2 = [
    {
        details: {
            city: 'SG'
        }
    }
];

console.log(createNewObject(obj1));
console.log(createNewObject(obj2));

Tips for dynamically changing the object based on the value type in JavaScript

Answer №1

Answer №2

Similar questions

Searching for records in Rails using a specific attribute within an associated array

Pop-up window for uploading files

Struggling with setting up a PHP and Ajax registration and login system

Generating DOM elements at specific intervals using Jquery

Updating a child component within a Modal: A step-by-step guide

Expanding the Angular UI bootstrap modal to fullscreen

What is preventing this from functioning properly? (html/javascript)

The inputmask is triggering an unhandled RangeError due to surpassing the maximum call stack size

Switch up the perspective/component without altering the URL

Safari on iOS 9 having trouble playing embedded YouTube videos

From Ruby to Javascript: Solving the Challenges of Date Calculation

Using jQuery to replace an HTML element multiple times

Rotating images on a canvas

Preventing Canvas Image Disappearance with JavaScript's onload Event

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

Changing an element in an array by using a specific input

Struggling with breaking a string into an array in C

Exploring the world of PPM image formats

"The use of Node.js and Express.js in handling HTTP requests and responses

Leveraging Vuetify on a standalone .html document