Question

我有一个网站，我在该网站上渲染JSON文件中的块，用户可以根据需要对块进行排序，然后以另一种方式将其保存到数据库中。我的问题是如何保持与非JSON平面结构相同的结构。

来自JSON文件的示例：

async _get_option_value (opk) {
    try {
        const data = await aGet({"option": opk})
        if (data.is_percent === true) {
            this.totalUnitPrice += this.totalUnitPrice * parseInt(data.price) / 100
        } else {
            this.totalUnitPrice += data.price
        }
        console.log(data.price);
        return data;
    } catch (e) {
        console.error(e)
    }
}

在JSON文件中，呈现了“块”中的每个对象，并且可以对其进行重新排列，因此第0部分中的块可以有3个块，第1部分中只能有一个块等。 “而不仅仅是平坦的，是因为在某些特殊情况下，我仅渲染了某些部分。

HTML示例：

[{
    "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"
        },
    ]
}]

对于jquery / ajax代码，我使用push：

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

}）； }

对于PHP / Laravel代码，我只是有一个循环遍历json文件的循环，我认为在这里不必显示它。

我不知道如何，但是我想我应该以某种方式在父div中添加零件/块的开始并结束它，然后再开始下一个零件？

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

只需将外部类更改为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结构

2 个答案: