JS：將數組對象轉換為點字符串

Question

我在數組中嵌套了對象，我想用javascript將它們轉換成點符號字符串。

這是我的數據樣本數據，用於轉換過程。

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

預期結果是

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

Answer 1

您可以先收集路徑，然后構建一個屬性。

 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

您可以使用遞歸函數來格式化所需的格式。

 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) 

Answer 3

干得好！ Array.reduce和遞歸非常適合此問題。

 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)); 

更新清理了一下。 現在基本上是一個班輪🙌也為輸入數據添加了同級