mutlidimensional入力をJavaScriptオブジェクトに変換する

Question

私は数日間この問題を解決しようとしてきました。私はAjaxによって提出される必要があるいくつかのデータを持っています。ダイナミックなので、フィールド数はわかりません。その上に、フィールドの名前は多次元であり、また動的です。別の大きい方の配列に要素の未知数とdata[images][0][src]、data[images][0][alt]、data[images][0][description]、data[images][1][src]、data[images][1][alt]、data[images][1][description]があるかもしれない一方で、例えば一方が名前とdata[title]との入力を有するかもしれません。私の問題は、データの構造を維持しながら、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

あなたはループeach()ループを持つすべてのinputsは、split()を使用してname属性から配列を作成し、すでに受け入れ答えがありますが

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

をオブジェクトに追加するreduceを使用することができます。私の5セントは以下の通りです：

可能であれば、正規表現で作業するIMHOは避けてください。

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

次に、このクラスに一致するオブジェクトを構築：だから、私の提案は、画像が含まれており、入力のname属性を変更するのdivにいくつかのクラスを追加し、HTMLを少し変えることであろう

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があります。