gpt4 book ai didi

javascript - 如何使用 Javascript 从值数组中获取深度嵌套的对象结构

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:08:01 26 4
gpt4 key购买 nike

我有 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,但是它没有嵌套样式值,而是在 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 数组上对下面的函数进行了各种迭代。

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() 想出了一个答案,它回答了问题的第一部分。但是,下面的函数仍然返回原始对象不变。

   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
//

最佳答案

一种可能是使用 reduceRight将输入内容的 marks 子数组“减少”为具有所需“嵌套结构”的单个对象。

想法是从 { type : "text", text : content.text } 对象(将被嵌套)开始减少,然后用对象增量地“包装”该对象包含“类型”数据的。

要为具有类型元数据的对象实现正确的“包装”顺序,需要反向减少 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"
}]
}]
}
*/

希望对您有所帮助!

关于javascript - 如何使用 Javascript 从值数组中获取深度嵌套的对象结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58261182/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com