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

【问题标题】：Create multi dimensional JSON structure from HTML div structure从 HTML div 结构创建多维 JSON 结构
【发布时间】：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="{&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 包装元素使用不同的类，并将part 值传递给属性。然后用内部循环循环所有那些 part 元素以构建它的 blocks 数组

标签： javascript jquery json jquery-ui

【解决方案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="{&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>

【讨论】：

按照我想要的方式工作！

【解决方案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="{&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>

【讨论】：