JavaScript: change array objects into a string separated by dots

Question

JavaScript: change array objects into a string separated by dots

Task: Converting Nested Objects in an Array to Dot Notation String Using JavaScript

Here is a sample data structure that needs to be converted:

[
  {
    property: 'name',
    children: [],
    message: 'name should not be empty',
  },
  {
    property: 'priceForm',
    children: [
      {
        property: 'priceCurrency',
        children: [],
        message: 'priceCurrency should not be empty',
      },
    ],
  },
  {
    property: 'priceForm',
    children: [
      {
        property: 'rolePrices',
        children: [
          {
            property: '0',
            children: [
              {
                property: 'markupType',
                children: [],
                message: 'markupType should not be empty',
              },
            ],
          },
        ],
      },
    ],
  },
]

Desired Output:

{
  'name': 'name should not be empty',
  'priceForm.priceCurrency': 'priceCurrency should not be empty',
  'priceForm.rolePrices.0.markupType': 'markupType should not be empty',
}

javascript arrays object multidimensional-array nested

Answer 1

Answer №1

To start, the collection of the path is recommended before constructing a property.

function getObject(array, path = '', target = {}) {
    array.forEach(({ property, children = [], message }) => {
        var temp = path + (path && '.') + property;
        if (children.length) {
            getObject(children, temp, target);
            return;
        }
        target[temp] = message;
    });
    return target;   
}

var array = [{ property: 'name', children: [], message: 'name should not be empty' }, { property: 'priceForm', children: [{ property: 'priceCurrency', children: [], message: 'priceCurrency should not be empty' }] }, { property: 'priceForm', children: [{ property: 'rolePrices', children: [{ property: '0', children: [{ property: 'markupType', children: [], message: 'markupType should not be empty' }] }] }] }],
    object = getObject(array);
    
console.log(object);

Answer 2

To start, the collection of the path is recommended before constructing a property.

function getObject(array, path = '', target = {}) {
    array.forEach(({ property, children = [], message }) => {
        var temp = path + (path && '.') + property;
        if (children.length) {
            getObject(children, temp, target);
            return;
        }
        target[temp] = message;
    });
    return target;   
}

var array = [{ property: 'name', children: [], message: 'name should not be empty' }, { property: 'priceForm', children: [{ property: 'priceCurrency', children: [], message: 'priceCurrency should not be empty' }] }, { property: 'priceForm', children: [{ property: 'rolePrices', children: [{ property: '0', children: [{ property: 'markupType', children: [], message: 'markupType should not be empty' }] }] }] }],
    object = getObject(array);
    
console.log(object);

Answer 3

Answer №2

One interesting approach is to utilize a recursive function for custom formatting.

const data = [{ property: 'name', children: [], message: 'name should not be empty' }, { property: 'priceForm', children: [{ property: 'priceCurrency', children: [], message: 'priceCurrency should not be empty' }] }, { property: 'priceForm', children: [{ property: 'rolePrices', children: [{ property: '0', children: [{ property: 'markupType', children: [], message: 'markupType should not be empty' }] }] }] }];

let result = {};
function formatData(data, prefix) {
    prefix = prefix ? `${prefix}.` : '';
    let message = '';
    data.forEach(item => {
        prefix = `${prefix}${item.property}`;
        message = item.message;
        if (!item.children.length) {
            item.message && (result[prefix] = item.message);
        } else {
            let childData = formatData(item.children, prefix);
            childData['message'] && childData['prefix'] && (result[`${prefix}.${childData['prefix']}`] = childData['message']);
        }
        prefix = '';
    });

    return { prefix: prefix, message: message };
}

formatData(data);

console.log(result);

Answer 4

One interesting approach is to utilize a recursive function for custom formatting.

const data = [{ property: 'name', children: [], message: 'name should not be empty' }, { property: 'priceForm', children: [{ property: 'priceCurrency', children: [], message: 'priceCurrency should not be empty' }] }, { property: 'priceForm', children: [{ property: 'rolePrices', children: [{ property: '0', children: [{ property: 'markupType', children: [], message: 'markupType should not be empty' }] }] }] }];

let result = {};
function formatData(data, prefix) {
    prefix = prefix ? `${prefix}.` : '';
    let message = '';
    data.forEach(item => {
        prefix = `${prefix}${item.property}`;
        message = item.message;
        if (!item.children.length) {
            item.message && (result[prefix] = item.message);
        } else {
            let childData = formatData(item.children, prefix);
            childData['message'] && childData['prefix'] && (result[`${prefix}.${childData['prefix']}`] = childData['message']);
        }
        prefix = '';
    });

    return { prefix: prefix, message: message };
}

formatData(data);

console.log(result);

Answer 5

Answer №3

Here is the solution using Array.reduce and recursion to solve this problem.

const foo = (data, prefix = "") =>
  data.reduce(
    (acc, { property, message, children }) => ({
      ...acc,
      ...(children.length
        ? foo(children, `${prefix}${property}.`)
        : { [`${prefix}${property}`]: message })
    }),
    {}
  );

const data = [
  {
    property: "name",
    children: [],
    message: "name should not be empty"
  },
  {
    property: "priceForm",
    children: [
      {
        property: "priceCurrency",
        children: [],
        message: "priceCurrency should not be empty"
      }
    ]
  },
  {
    property: "priceForm",
    children: [
      {
        property: "rolePrices",
        children: [
          {
            property: "0",
            children: [
              {
                property: "markupType",
                children: [],
                message: "markupType should not be empty"
              },
              {
                property: "sibling!",
                children: [],
                message: "added a sibling to the input data"
              }
            ]
          }
        ]
      }
    ]
  }
];


console.log(foo(data));

Update simplified the code. It's now basically a one-liner 🙌 Also added a sibling to the input data

Answer 6

Here is the solution using Array.reduce and recursion to solve this problem.

const foo = (data, prefix = "") =>
  data.reduce(
    (acc, { property, message, children }) => ({
      ...acc,
      ...(children.length
        ? foo(children, `${prefix}${property}.`)
        : { [`${prefix}${property}`]: message })
    }),
    {}
  );

const data = [
  {
    property: "name",
    children: [],
    message: "name should not be empty"
  },
  {
    property: "priceForm",
    children: [
      {
        property: "priceCurrency",
        children: [],
        message: "priceCurrency should not be empty"
      }
    ]
  },
  {
    property: "priceForm",
    children: [
      {
        property: "rolePrices",
        children: [
          {
            property: "0",
            children: [
              {
                property: "markupType",
                children: [],
                message: "markupType should not be empty"
              },
              {
                property: "sibling!",
                children: [],
                message: "added a sibling to the input data"
              }
            ]
          }
        ]
      }
    ]
  }
];


console.log(foo(data));

Update simplified the code. It's now basically a one-liner 🙌 Also added a sibling to the input data

JavaScript: change array objects into a string separated by dots

Answer №1

Answer №2

Answer №3

Similar questions

Is it necessary to call detach() in rangy?

Having trouble with Ajax and facebox integration issues?

The $.get method in AJAX/jQuery is functioning properly, however, there seems to be an issue with

Guide to developing a custom plugin for Nuxt.js

jQuery's Ajax feature fails to transmit information

Can anyone tell me where to locate the AndroidManifest.xml file within a React Native Expo project?

How can I specify which specific div I want to run code on, rather than all divs with the

Failure to fetch data through Axios Post method with a Parameter Object

Obtain the ClientID for a particular user control that is within a repeater's bindings

Is there a way to determine the app bar height within a React Material UI application?

How to Develop a WebSocket Client for Mocha Testing in a Sails.js Application?

JavaScript Variables Lose Their Values

Why styled-components namespace problem in React Rollup build?

Eliminate redundant tags using jQuery

Creating a counter while iterating over a JSON array in jq

Utilizing an Async API call from a separate page and passing it as a component input

Save a canvas image directly to your WordPress media library or server

Combining Arrays with Matching Index in Objective-C

Three.js: Create a Custom Cube Panorama with Adjustable Orientation (Front, Back, Left, Right, etc.)

Pattern for identifying JavaScript import declarations