javascript - 基于非结构化JS对象创建结构化JS对象

Question

我有这个 js 对象数据:

const content = 
  [ { h1 : 'This is title number 1'          } 
  , { h2 : 'Description'                     }
  , { p  : 'Description unique content text' }
  , { h2 : 'Content'                         }
  , { p  : 'Content unique text here 1'      }
  , { ul : [ 
           'string value 1',
           'string value 2'
       ]                       
  , } 
  , { p  : 'Content unique text here 2'      }
  , { h2 : 'CTA message'                     }
  , { p  : 'CTA message unique content here' }
  , { h2 : 'CTA button'                      }
  , { p  : 'CTA button unique content here'  }
  , { p  : ''                                }
  , { h1 : 'This is title number 2'          } 
  , { h2 : 'Description'                     }
  , { p  : 'Description unique content text' }
  , { h2 : 'Content'                         }
  , { p  : 'Content unique text here 1'      }
  , { h2 : 'CTA message'                     }
  , { p  : 'CTA message unique content here' }
  , { h2 : 'CTA button'                      }
  , { p  : 'CTA button unique content here'  }
  , { p  : ''                                }
  ]

h1表示一个新对象，ul是可选的

我想把它映射到这样的结构:

interface Content = {
  title: string;
  description: string;
  content: any[];
  cta: {
    message: string;
    button: string;
  }
}

我想知道最好的方法是什么？

我想我必须遍历这些项目并根据我的界面填充一个新的 JSON 对象。第一个元素始终是标题，然后只检查“描述”，然后下一个元素是描述值。

    const json = Content[];
    content.forEach(element => {
    if(element.h1) {
        // add props to new object
        // add object to json array
    }
});

我只是想知道您如何基于原始内容 JSON 对象创建多个内容对象？

这是我期待的结果:

json = [
  {
    title: 'This is title number 1',
    description: 'Description unique content text',
    content: [
      {
        p: 'Content unique text here 1',
      },
      {
        ul: [
            'string value 1',
            'string value 2'
        ]
      },
      {
        p: 'Content unique text here 2'
      } 
    ],
   cta: {
      message: 'CTA message unique content here'
      button: 'CTA button unique content here'
   }
  },
  ...
]

更新:根据下面的评论，我正在寻找自上而下的解析器解决方案。如果通过引入新的独特的 h2+p 或 h2+p+ul 等元素稍微更改输入数组，该解决方案应该很容易扩展。

Answer 1

根据我的理解，我们将为 content 数组属性中的每组对象从上到下采用相同的格式。如果是，我只是花了一些时间来处理这个需求并提出这个解决方案。我知道我们可以对其进行更多优化，使其更具活力。您能否看一下并确认它是否按照您的预期工作，然后我将致力于重构和代码优化部分。

注意: 所有步骤都已在下面的代码片段本身中作为描述性注释提及。

演示:

    // Input Array
    const content = [
      { h1 : 'This is title number 1' },
      { h2 : 'Description' },
      { p  : 'Description unique content text' },
      { h2 : 'Content' },
      { p  : 'Content unique text here 1' },
      { ul : [ 
        'string value 1',
        'string value 2'
      ]},
      { p  : 'Content unique text here 2' },
      { h2 : 'CTA message' },
      { p  : 'CTA message unique content here' },
      { h2 : 'CTA button' },
      { p  : 'CTA button unique content here' },
      { p  : '' },
      { h1 : 'This is title number 2' },
      { h2 : 'Description' },
      { p  : 'Description unique content text' },
      { h2 : 'Content' },
      { p  : 'Content unique text here 1' },
      { h2 : 'CTA message' },
      { p  : 'CTA message unique content here' },
      { h2 : 'CTA button' },
      { p  : 'CTA button unique content here' },
      { p  : '' }
    ];

    // Variables
    const chunkEndIndexArr = []; // get the chunk ending index for each set of objects.
    const chunkArr = []; // This will contain the nested arrays containging each chunks. For ex: [[], []]
    let startIndex = 0; // This is the start index to loop through the content array.
    let splittedStr = []; // This variable is used to split the CTA message and CTA button strings which helps while building the final result.

    // Getting index to categorize the chunks seprately for each object based on the object { "p": ""} which is like a breakup for each objects.
    content.forEach(obj => {
      if (Object.hasOwn(obj, 'p') && !obj.p) {
        chunkEndIndexArr.push(content.indexOf(obj) - 1)
      }
    });

    // This set of code is used to create an array of each set of objects seperately which will help in building the algorithm.
    chunkEndIndexArr.forEach((elem, index) => {
      const innerArr = [];
      for (var i = startIndex; i <= chunkEndIndexArr[index]; i++) {
        innerArr.push(content[i])
      }
      // pushing each set of objects in a seperate array.
      chunkArr.push(innerArr);
      // resetting the startindex for the next set of records. 
      startIndex = chunkEndIndexArr[index] + 2
    });

    // This set of code is used to build the desired output from the chunked array of each set of objects.
    const res = chunkArr.map(chunk => {
      const innerObj = {};
      chunk.forEach(obj => {
        // Property assignment for Title
        if (Object.hasOwn(obj, 'h1')) {
          innerObj.title = obj.h1
        }
        // Property assignment for Description
        if (Object.hasOwn(obj, 'h2') && obj.h2 === 'Description') {
          innerObj[obj.h2.toLowerCase()] = Object.values(chunk[chunk.indexOf(obj) + 1])[0]
        }
        // Property assignment for Content
        if (Object.hasOwn(obj, 'h2') && obj.h2 === 'Content') {
          innerObj[obj.h2.toLowerCase()] = [];
          if (Object.hasOwn(chunk[chunk.indexOf(obj) + 1], 'p')) {
            innerObj[obj.h2.toLowerCase()].push(chunk[chunk.indexOf(obj) + 1])
          }
          if (Object.hasOwn(chunk[chunk.indexOf(obj) + 2], 'ul')) {
            innerObj[obj.h2.toLowerCase()].push(chunk[chunk.indexOf(obj) + 2])
          }
          if (Object.hasOwn(chunk[chunk.indexOf(obj) + 3], 'p') && chunk[chunk.indexOf(obj) + 3].p.includes('Content')) {
            innerObj[obj.h2.toLowerCase()].push(chunk[chunk.indexOf(obj) + 3])
          }
        }
        // Property assignment for CTA message.
        if (Object.hasOwn(obj, 'h2') && obj.h2.includes('CTA message')) {
          splittedStr = obj.h2.toLowerCase().split(' ');
          innerObj[splittedStr[0]] = {};
          innerObj[splittedStr[0]].message = Object.values(chunk[chunk.indexOf(obj) + 1])[0];
        }
        
        // Property assignment for CTA button.
        if (Object.hasOwn(obj, 'h2') && obj.h2.includes('CTA button')) {
          innerObj[splittedStr[0]].button = Object.values(chunk[chunk.indexOf(obj) + 1])[0];
        }
      });
      return innerObj;
    });

document.getElementById("result").innerText = JSON.stringify(res, null, 2); // Final result

<pre id="result"></pre>