将多维输入转换为JavaScript对象

Question

我一直试图解决这个问题，现在已经有好几天了，这让我感到非常紧张。我有一些需要由Ajax提交的数据。它是动态的，所以我不知道它有多少个字段。最重要的是，这些字段的名称是多维的，也是动态的。例如，一个可能具有与所述名称和data[title]输入而另一个较大的一个可能具有data[images][0][src]，data[images][0][alt]，data[images][0][description]，data[images][1][src]，data[images][1][alt]，data[images][1][description]具有未知数量的元件的阵列构成。我的问题是我需要获得一个可以通过Ajax提交的对象，同时保持数据的结构。

我试着序列化数据，但只是想出了一串name = value。我也尝试了serialise数组，但这只是给了我一个[name, value]的数组。我设法使用正则表达式手动生成对象来分割它，但是我找不到合并结果对象的方法。我的代码的最新版本是：

$('.modal-content').find('input[name^="data"]').each(function() { 
    var found = $(this).attr('name').match(re).reverse(); 
    var temp = $(this).val(); 
    $.each(found, function() 
    { 
     str = this.substr(1, this.length - 2); 
     var t = {}; 
     t[str] = temp; 
     temp = t; 
    }); 
    data = $.each({}, data, temp); 
}); 

遗憾的是它并没有将它们合并，它将覆盖什么是什么是临时数据。如果数据有data.images[0].src = "mysrc"和临时有data.images[0].alt = "myalt"然后我只是最终data.images[0].alt = "myalt"和src不再存在。

必须有一个简单的方法来做到这一点，地狱在这一点上，我甚至会采取复杂的方式来做到这一点。有人可以帮助我吗？

Answer 1

你可以循环所有inputs与each()循环，使用split()创建name属性数组，然后用reduce加入到反对

var result = {} 
 

 
$('input').each(function() { 
 
    var name = $(this).attr('name'); 
 
    var val = $(this).val(); 
 

 
    var ar = name.split(/\[(.*?)\]/gi).filter(e => e != ''); 
 

 
    ar.reduce(function(a, b, i) { 
 
    return (i != (ar.length - 1)) ? a[b] || (a[b] = {}) : a[b] = val; 
 
    }, result) 
 

 
}) 
 

 
console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="gallery-images" class="ui-sortable"> 
 
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
 
    <div> 
 
     <img src="http://localhost:8000/img/example.jpg"> 
 
     <input type="hidden" name="data[images][0][src]" value="img/example.jpg"> 
 
     <div class="form-group"> 
 
     <label for="title-0">Title:</label> 
 
     <input type="text" name="data[images][0][title]" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="description-0">Description:</label> 
 
     <input type="text" name="data[images][0][description]" class="form-control" id="description-0" value="A default example image." placeholder="Description"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="alt-0">Alt tag (SEO):</label> 
 
     <input type="text" name="data[images][0][alt]" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="order-0">Order:</label> 
 
     <input type="number" name="data[images][0][order]" class="form-control image-order" id="order-0" value="0"> 
 
     </div> 
 
     <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
 
    </div> 
 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
 
    <div> 
 
     <img src="http://localhost:8000/img/example.jpg"> 
 
     <input type="hidden" name="data[images][1][src]" value="img/example.jpg"> 
 
     <div class="form-group"> 
 
     <label for="title-1">Title:</label> 
 
     <input type="text" name="data[images][1][title]" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="description-1">Description:</label> 
 
     <input type="text" name="data[images][1][description]" class="form-control" id="description-1" value="A default example image." placeholder="Description"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="alt-1">Alt tag (SEO):</label> 
 
     <input type="text" name="data[images][1][alt]" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="order-1">Order:</label> 
 
     <input type="number" name="data[images][1][order]" class="form-control image-order" id="order-1" value="1"> 
 
     </div> 
 
     <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
 
    </div> 
 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
 
    <div> 
 
     <img src="http://localhost:8000/uploads/galleries\21\4-tux-30.jpg"> 
 
     <input type="hidden" name="data[images][2][src]" value="uploads/galleries\21\4-tux-30.jpg"> 
 
     <div class="form-group"> 
 
     <label for="title-2">Title:</label> 
 
     <input type="text" name="data[images][2][title]" class="form-control" id="title-2" value="" placeholder="Title"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="description-2">Description:</label> 
 
     <input type="text" name="data[images][2][description]" class="form-control" id="description-2" value="" placeholder="Description"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="alt-2">Alt tag (SEO):</label> 
 
     <input type="text" name="data[images][2][alt]" class="form-control" id="alt-2" value="" placeholder="Alt tag"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="order-2">Order:</label> 
 
     <input type="number" name="data[images][2][order]" class="form-control image-order" id="order-2" value="2"> 
 
     </div> 
 
     <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
 
    </div> 
 
    </li> 
 
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
 
    <div> 
 
     <img src="http://localhost:8000/uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg"> 
 
     <input type="hidden" name="data[images][3][src]" value="uploads/galleries\21\all-free-backgrounds-simple-style-darkblue-18.jpg"> 
 
     <div class="form-group"> 
 
     <label for="title-3">Title:</label> 
 
     <input type="text" name="data[images][3][title]" class="form-control" id="title-3" value="" placeholder="Title"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="description-3">Description:</label> 
 
     <input type="text" name="data[images][3][description]" class="form-control" id="description-3" value="" placeholder="Description"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="alt-3">Alt tag (SEO):</label> 
 
     <input type="text" name="data[images][3][alt]" class="form-control" id="alt-3" value="" placeholder="Alt tag"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="order-3">Order:</label> 
 
     <input type="number" name="data[images][3][order]" class="form-control image-order" id="order-3" value="3"> 
 
     </div> 
 
     <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

虽然已经有一个公认的答案。这里是我的5美分：

恕我直言，使用正则表达式应尽可能避免。所以我的建议是要改变HTML了一下，加入一些类包含图像和更改输入name属性的DIV：

<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
     <div class="my-image"> 
      <img src="http://localhost:8000/img/example.jpg"> 
      <input type="hidden" name="src" value="img/example.jpg"> 
      <div class="form-group"> 
       <label for="title-0">Title:</label> 
       <input type="text" name="title" class="form-control" id="title-0" value="Default Example Image 1" placeholder="Title"> 
      </div> 
      <div class="form-group"> 
       <label for="description-0">Description:</label> 
       <input type="text" name="description" class="form-control" id="description-0" value="A default example image." placeholder="Description"> 
      </div> 
      <div class="form-group"> 
       <label for="alt-0">Alt tag (SEO):</label> 
       <input type="text" name="alt" class="form-control" id="alt-0" value="fluid gallery example image" placeholder="Alt tag"> 
      </div> 
      <div class="form-group"> 
       <label for="order-0">Order:</label> 
       <input type="number" name="order" class="form-control image-order" id="order-0" value="0"> 
      </div> 
      <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
     </div> 
    </li> 
    <li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 gallery-image ui-sortable-handle"> 
     <div class="my-image"> 
      <img src="http://localhost:8000/img/example.jpg"> 
      <input type="hidden" name="src" value="img/example.jpg"> 
      <div class="form-group"> 
       <label for="title-1">Title:</label> 
       <input type="text" name="title" class="form-control" id="title-1" value="Default Example Image 2" placeholder="Title"> 
      </div> 
      <div class="form-group"> 
       <label for="description-1">Description:</label> 
       <input type="text" name="description" class="form-control" id="description-1" value="A default example image." placeholder="Description"> 
      </div> 
      <div class="form-group"> 
       <label for="alt-1">Alt tag (SEO):</label> 
       <input type="text" name="alt" class="form-control" id="alt-1" value="fluid gallery example image" placeholder="Alt tag"> 
      </div> 
      <div class="form-group"> 
       <label for="order-1">Order:</label> 
       <input type="number" name="order" class="form-control image-order" id="order-1" value="1"> 
      </div> 
      <button type="button" class="btn btn-danger remove-gallery-image-btn">× Delete</button> 
     </div> 
    </li> 

然后建立符合这个类对象：

var obj = { 
    data: { 
    images: [] 
    } 
} 

var groups = $('.my-image'); 

groups.each(function(idx, el) { 
    var child = {} 
    $(el).find('input').each(function(jdx, info){ 
    var $info = $(info); 
    child[$info.attr('name')] = $info.val(); 
    }); 

    obj.data.images.push(child); 
}); 

我们会得到相同的结果，但它可能不太容易出错。这是一个plunker。