从 HTML div 结构创建多维 JSON 结构

Question

我有一个站点，我在其中渲染来自 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 文件中，"blocks" 中的每个对象都被渲染并可以重新排列，因此第 0 部分中的块可以有 3 个块，而第 1 部分只能有一个块等。原因为什么每个块都在 "part" 内而不是平坦的是因为在某些特殊情况下我只渲染了一些部分。

HTML 示例：

<div class="blockContent" data-blockcontent="ADD 'part' JSON HERE SOMEHOW?">
  <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_0&quot;}">Some info 1</div>
  <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_1&quot;}">Some info 2</div>
</div>
<div class="blockContent" data-blockcontent="ADD 'part' JSON HERE SOMEHOW?">
  <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_2&quot;}">Some info 3</div>
  <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_3&quot;}">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/blocks 的开头并结束它，然后开始下一部分？

Answer 1

你可以这样做，每一步只选择直接子级，这是一个只适用于一层深度的例子。

我个人会选择在语义上区分类和数据属性（例如 .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="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_0&quot;}">Some info 1</div>
    <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_1&quot;}">Some info 2</div>
  </div>
  <div class="blockContent" data-blockcontent="1">
    <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_2&quot;}">Some info 3</div>
    <div class="blockContent" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_3&quot;}">Some info 4</div>
  </div>
</form>

Answer 2

只需将外部 class 更改为 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="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_0&quot;}">Some info 1</div>
  <div class="block" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_1&quot;}">Some info 2</div>
</div>
<div class="part" data-part="1">
  <div class="block" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_2&quot;}">Some info 3</div>
  <div class="block" data-blockcontent="{&quot;type&quot;:&quot;template&quot;,&quot;id&quot;:&quot;SOME_ID_3&quot;}">Some info 4</div>
</div>

从 HTML div 结构创建多维 JSON 结构

Create multi dimensional JSON structure from HTML div structure

javascript

jquery

json

jquery-ui