将多维度输入转换为JavaScript对象

我已经试着解决这个问题好几天了，它快把我逼疯了。我有一些数据需要通过Ajax提交。它是动态的，所以我不知道它有多少字段。除此之外，字段的名称是多维的，也是动态的。例如，一个可能有名称为

data[name]

和

data[title]

的输入，而另一个较大的可能有

data[images][0][src][code>，
data[images][0][alt alt]
，
data[images][0][description][description][1][src][code>，
数据[images 1][alt 1][code>，
数据[images 1][说明]
具有未知数量的数组元素。我的问题是，我需要获得一个可以通过Ajax提交的对象，同时维护数据结构

我尝试了序列化数据，但只得到了一个字符串
name=value
。我也尝试了序列化数组，但这只给了我一个数组
[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”
文件，那么我就得到了
数据.images[0].alt=“myalt”
文件，src就不在了

必须有一个简单的方法来实现这一点，在这一点上我甚至会采取一个复杂的方法来实现。有人能帮我吗？
你可以用
每个（）循环所有
输入
，使用
拆分（）
从
名称
属性创建数组，然后使用
减少
添加到对象


var result={}
$（'input'）。每个（函数（）{
var name=$（this.attr（'name'）；
var val=$（this.val（）；
var ar=name.split（/\[（.*？\]）/gi.filter（e=>e！=''）；
ar.REDUCT（功能（a、b、i）{
返回（i！=（ar.length-1））？a[b]|（a[b]={}）：a[b]=val；
}，结果）
})
console.log（结果）
。作为控制台包装{最大高度：100%！重要；顶部：0；}



标题：
说明：
Alt标签（SEO）：
订单：
×删除


标题：
说明：
Alt标签（SEO）：
订单：
×删除


标题：
说明：
Alt标签（SEO）：
订单：
×删除


标题：
说明：
Alt标签（SEO）：
订单：
×删除

尽管已经有一个公认的答案。这是我的5美分：

尽可能避免使用正则表达式。因此，我的建议是稍微更改HTML，向包含图像的div中添加一些类，并更改输入的name属性：

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

我们会得到相同的结果，但可能不太容易出错。下面是一个。
HTML本身是什么样子的？它是动态的，但它是否遵循一个固定的模式？@Rorymcrossan唯一的共同因素是它们位于一个ID为的div中，并且它们都遵循模式
name=“data[x][y][z]
其中xyz是动态的，段数未知。有些是文本输入，有些是单选按钮，有些是选择，有些是文本区域（我知道我只做输入，在输入时会调整代码）实际的HTML非常长，所以我在这里粘贴了迄今为止最复杂版本的副本-您需要生成的JSON是什么样子的？您不能创建一个数组，其中每个位置都有一个格式为
{str:temp}的对象吗
？非常感谢！它很有效！我以前从未听说过
reduce
。这正是我所需要的。不客气，你可以在这里阅读更多关于它的信息。我在
过滤器上使用了ES6上的箭头功能，因此如果你需要对旧浏览器的支持，你可以这样编写。谢谢，我已经更新了我的代码，使它能够与旧浏览器一起工作o、 感谢您的输入，但这正是我不想做的。因为输入是动态的，我必须为每种不同类型编写多次代码。我不想为图像、视频、纯文本、横幅等编写一个代码。使用正则表达式，无论我有什么输入字段，它都可以处理动态内容只要他们从
数据开始
就行了。
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);
});