如何從具有 Javascript 的值數組中獲取深度嵌套的 object 結構

Question

我有 JSON 代表文本編輯器中的一些內容。 這是一個示例：

{ "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "text", "marks": [ { "type": "bold" } ], "text": "Testing" }, { "type": "text", "text": " " }, { "type": "text", "marks": [ { "type": "strike" } ], "text": "Testing " }, { "type": "text", "marks": [ { "type": "strike" }, { "type": "underline" } ], "text": "Testing" }, { "type": "text", "marks": [ { "type": "strike" } ], "text": " Testing" } ] }, { "type": "paragraph" }, { "type": "paragraph", "content": [ { "type": "text", "marks": [ { "type": "bold" } ], "text": "Testing " }, { "type": "text", "marks": [ { "type": "bold" }, { "type": "italic" }, { "type": "strike" } ], "text": "Testing" }, { "type": "text", "marks": [ { "type": "bold" } ], "text": " Testing" } ] }, { "type": "paragraph" } ] }

這很好，因為我可以安全地將其轉換為 html，但是它沒有為 styles 提供嵌套值，而是在marks子數組中表示此樣式。 如果存儲已經嵌套的數據相對於它的自然層次結構，我更喜歡什么。

所以而不是：

{ 
     "type":"text",
     "marks": [{ "type": "bold" }, { "type": "italic" }],
     "text": "Testing"
}

我想要更准確地表示生成的 HTML 的東西：

{
  "type" : "bold", 
   "content" : [{ 
       "type" : "italic", 
       "content":[{ 
            "type" : "text", 
            "text" : "Testing"
       }]
   }]
}

我嘗試了各種解析 json 並將其存儲如下的方法，但我認為我缺少關於 javascript 如何與對象一起使用的一些基本知識，因為沒有進行更改。

我在 json 中的每個marks數組上對下面的 function 進行了各種迭代。

item = {type:type, text:text}

marks.forEach((mark)=>{
   let newObj = {content:[], type:mark.type}
    item = newObj.content.push(item)
});

一些額外的背景信息，這是基於prosemirror的tiptap所見即所得編輯器生成的json。 我不能使用正常的 html 導出，因為我正在對數據進行特殊處理。 任何幫助將不勝感激。

編輯：Dacre Denny 使用reduceRight()提出了一個答案，它回答了問題的第一部分。 但是，下面的 function 仍然返回原始 object 不變。

   const content = editorContent.content

    function parseContent (arr) {
      arr.forEach((item)=>{

        // Check if item contains another array of items, and then iterate
        over that one too.

        if(item.content){
          parseContent(item.content)
        }

        if(item.marks){
          //Extract values from item

          // THis is the correct function
          const processContent = ({ marks, text }) =>
          marks.reduceRight((acc, mark) => ({ type: mark.type, content: [acc]
            }), {
              type: "text",
              text: text
            });

          item = processContent({ text:item.text, marks:item.marks })


        }
      })
    }

    parseContent(content)

return content
//

Answer 1

一種可能性是使用reduceRight將輸入內容的marks子數組“減少”為具有所需“嵌套結構”的單個 object。

這個想法是從{ type: "text", text: content.text } object （將被嵌套）開始減少，然后使用包含“type”數據的對象逐步“包裝” object。

為了對元數據類型的對象實現正確的“包裝”順序，需要反向減少marks數組。 這就是使用reduceRight的原因（而不是常規的reduce ）。

這是一個示例片段來展示這個想法的實際效果：

 /* Helper function processes the content object, returns the required nested structure */ const processContent = ({ marks, text }) => marks.reduceRight((acc, mark) => ({ type: mark.type, content: [acc] }), { type: "text", text: text }); console.log(processContent({ "type": "text", "marks": [{ "type": "bold" }, { "type": "italic" }], "text": "Testing" })) /* Result: { "type": "bold", "content": [{ "type": "italic", "content":[{ "type": "text", "text": "Testing" }] }] } */

希望有幫助！