javascript - 如何使用 Javascript 从值数组中获取深度嵌套的对象结构
问题描述
我有 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 如何处理对象的一些基本知识,因为没有进行更改。
我已经marks
对 json 中的每个数组进行了以下函数的各种迭代。
item = {type:type, text:text}
marks.forEach((mark)=>{
let newObj = {content:[], type:mark.type}
item = newObj.content.push(item)
});
一些额外的背景信息,这是tiptap所见即所得编辑器生成的json,它是基于prosemirror的。我无法使用正常的 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"
}]
}]
}
*/
希望有帮助!
推荐阅读
- angular - ionic4 ReactiveForms 'live' 货币掩码
- javascript - 如何修复 TypeError:在 JSON.stringify 将循环结构转换为 JSON(
) 在本机反应 - javascript - 如何使用正则表达式匹配不包含多个特定单词之一的字符串?
- javascript - RXJS:从 of() 移动到 schedule()
- sql - 从 SQL Server 到非英语字符的 Oracle 的数据长度问题
- c# - Chrome驱动程序阻止图像扩展冻结页面?
- c# - 有什么方法可以模拟 BeginTransaction 进行单元测试
- reactjs - 从内页返回首页后悬停不工作
- kotlin - 布局视图未使用 Butterknife 初始化
- vb.net - 在数字范围内查找第一个和最后一个数字