JS: convert array objects to dot string

Question

I have nested objects in array and i want to convert them into dot notation string with javascript.

This is my data sample data for converting process.

[
  {
    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',
              },
            ],
          },
        ],
      },
    ],
  },
]

Expected result is

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

What happens if there's more than 1 element inside children? — MinusFour
– MinusFour, Commented Aug 9, 2019 at 15:45
for example 'priceForm.rolePrices.0.markupType1': 'markupType1 should not be empty', 'priceForm.rolePrices.1.markupType2': 'markupType2 should not be empty', 'priceForm.rolePrices.2.markupType3': 'markupType3 should not be empty' — Taha Ergun
– Taha Ergun, Commented Aug 9, 2019 at 15:46

Nina Scholz · Accepted Answer · 2019-08-09 15:53:54Z

You could collect the path first and then build 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);

MH2K9 · Accepted Answer · 2019-08-09 16:08:07Z

0

You can use recursive function to format you want.

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 format(data, prefix) {
    prefix = prefix ? `${prefix}.` : ''
    let message = ''
    data.forEach(i => {
        prefix = `${prefix}${i.property}`
        message = i.message
        if (!i.children.length) {
            i.message && (result[prefix] = i.message)
        } else {
            let child_data = format(i.children, prefix)
            child_data['message'] && child_data['prefix'] && (result[`${prefix}.${child_data['prefix']}`] = child_data['message'])
        }
        prefix = ''
    })

    return {prefix: prefix, message: message}
}

format(data)

console.log(result)

edited Aug 9, 2019 at 16:08

answered Aug 9, 2019 at 16:00

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

2 Comments

Mohrn Over a year ago

Not quite the output OP asked for.

MH2K9 Over a year ago

Yes, I forgot to clear prefix. Now its OK. Thanks :)

Mohrn · Accepted Answer · 2019-08-09 16:08:49Z

Here you go! Array.reduce and recursion is a good fit for 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 cleaned up a bit. Basically a one liner now 🙌 Added a sibling to the input data too

Collectives™ on Stack Overflow

JS: convert array objects to dot string

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related