从 HTML div 结构创建多维 JSON 结构
Posted
技术标签:
【中文标题】从 HTML div 结构创建多维 JSON 结构【英文标题】：Create multi dimensional JSON structure from HTML div structure 【发布时间】：2019-11-27 14:05:35 【问题描述】：我有一个站点，我在其中从 JSON 文件呈现块，然后用户可以在其中以另一种方式对块进行排序，然后我将其保存到数据库中。我的问题是如何保持相同的结构，因为它不是一个扁平的 JSON 结构。
来自 JSON 文件的示例：
[
"part": 0,
"blocks": [
"type": "template",
"id": "SOME_ID_0"
,
"type": "template",
"id": "SOME_ID_1"
,
]
,
"part": 1,
"blocks": [
"type": "template",
"id": "SOME_ID_2"
,
"type": "template",
"id": "SOME_ID_3"
,
]
]
从 JSON 文件中，“块”中的每个对象都被渲染并可以重新排列，因此第 0 部分中的块可以有 3 个块，第 1 部分可能只有一个块，等等。每个块在“部分”中的原因" 而不仅仅是平面是因为我在某些特殊情况下只渲染了某些部分。
html 示例：
<div class="blockContent" data-blockcontent="ADD 'part' JSON HERE SOMEHOW?">
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_0"">Some info 1</div>
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_1"">Some info 2</div>
</div>
<div class="blockContent" data-blockcontent="ADD 'part' JSON HERE SOMEHOW?">
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_2"">Some info 3</div>
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_3"">Some info 4</div>
</div>
对于 jquery/ajax 代码，我使用 push：
// Save block structure for ÅR
var blockContent=[];
$("#myForm").find('.blockContent').each(function(i,item)
blockContent.push($(item).data('blockcontent'));
);
$.ajax(
url:"/ajax/saveBlockStructure",
method:"POST",
async:true,
data:
id: " $id ",
_token: " csrf_token() ",
blockStructure: JSON.stringify(blockContent)
);
对于 php/Laravel 代码，我只有一个循环来迭代 json 文件，我认为这里没有必要展示。
我不知道怎么做，但我想我应该以某种方式在父 div 中添加部分/块的开头并结束它，然后从下一部分开始？
【问题讨论】：
您可能希望part 包装元素使用不同的类，并将part 值传递给属性。然后用内部循环循环所有那些 part 元素以构建它的 blocks 数组
【参考方案1】：
只需将外部类更改为part 并使用data-part 属性。
那么就是简单嵌套map()来创建数据
const data = $('.part').map(function()
const $el = $(this),
blocks = $el.children().map(function()
return $(this).data('blockcontent');
).get()
return
part: $el.data('part'),
blocks: blocks
).get()
console.log(data)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="part" data-part="0">
<div class="block" data-blockcontent=""type":"template","id":"SOME_ID_0"">Some info 1</div>
<div class="block" data-blockcontent=""type":"template","id":"SOME_ID_1"">Some info 2</div>
</div>
<div class="part" data-part="1">
<div class="block" data-blockcontent=""type":"template","id":"SOME_ID_2"">Some info 3</div>
<div class="block" data-blockcontent=""type":"template","id":"SOME_ID_3"">Some info 4</div>
</div>【讨论】：
按照我想要的方式工作！【参考方案2】：您可以这样做，每一步仅选择直接子级，这是一个仅适用于一级深度的示例。
我个人会选择在语义上区分类和数据属性（例如 .blockPart 和 data-blockpartid），但这实际上取决于您想在嵌套中走多远以及如何构建 HTML。
// Save block structure for ÅR
var blocks=[];
//you might need to adapt the selector if "part" blocks are not on top level of the form
$("#myForm").find('> .blockContent').each(function(i,item)
var part =
id: $(item).data('blockcontent'),
blocks: [],
;
blocks.push(part); //filling it after works because of reference
$(item).find('> .blockContent').each(function(i2,subitem)
part.blocks.push($(subitem).data('blockcontent'));
);
);
console.log(blocks);
console.log(JSON.stringify(blocks));<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="blockContent" data-blockcontent="0">
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_0"">Some info 1</div>
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_1"">Some info 2</div>
</div>
<div class="blockContent" data-blockcontent="1">
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_2"">Some info 3</div>
<div class="blockContent" data-blockcontent=""type":"template","id":"SOME_ID_3"">Some info 4</div>
</div>
</form>【讨论】：
以上是关于从 HTML div 结构创建多维 JSON 结构的主要内容，如果未能解决你的问题，请参考以下文章