1

В общем есть такой кодик, сдается мне формирую массив для отправки на сервер не очень гуманно, как бы сделать это более профессионально? Речь о семи строках после комментария в коде //формирую массив данных

$(function() {

  //сохранить
  $('#saveBtn').on('click', _saveDepts);

  //сохранение отделений
  function _saveDepts() {

    var _dataSend = {};
    _dataSend.action = 2;

    //тестовые данные
    _dataSend.test = [{
      "id": "3179",
      "nid": "37",
      "oid": "1",
      "town": "Ростов-на-Дону",
      "service": "Красные слоны",
      "address": "Ростов-на-Дону, ул. Вокзальная, 7",
      "coord": "47.222531, 39.718705",
      "tid": "628",
      "sid": "32"
    }, {
      "id": "3180",
      "nid": "37",
      "oid": "2",
      "town": "Ростов-на-Дону",
      "service": "Красные слоны",
      "address": "Ростов-на-Дону, ул. Тракторная, 37",
      "coord": "47.264931, 39.68827",
      "tid": "628",
      "sid": "32"
    }]


    //формирую массив данных
    _dataSend.data = [];
    $('.row').each(function(index, element) {
      _dataSend.data[index] = {};
      $(this).find('input').each(function(i, el) {
        _dataSend.data[index][$(el).attr('name').slice(0, -2)] = $(el).val();
      });
    });
    //конец

    console.log(_dataSend);
    $('#output').html(JSON.stringify(_dataSend));
    
    $.ajax({
        url: 'query.php',
        type: 'POST',
        dataType: 'json',
        data: _dataSend
      })
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("error");
      });
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-inline" id="rows">
  <div class="row">
    <input type="hidden" value="3179" name="id[]">
    <input type="text" value="37" name="nid[]">
    <input type="text" value="1" name="oid[]">
    <input type="text" value="Ростов-на-Дону" name="town[]">
    <input type="text" value="Красные слоны" name="service[]">
    <input type="text" value="Ростов-на-Дону, ул. Вокзальная, 7" name="address[]">
    <a class="getCoord" href="#">&gt;&gt;</a>
    <input type="text" value="47.222531, 39.718705" name="coord[]">
    <a class="deleteRow" href="#">x</a>
    <input type="hidden" value="628" name="tid[]">
    <input type="hidden" value="32" name="sid[]">
  </div>
  <div class="row">
    <input type="hidden" value="3178" name="id[]">
    <input type="text" value="39" name="nid[]">
    <input type="text" value="1" name="oid[]">
    <input type="text" value="Ростов-на-Дону" name="town[]">
    <input type="text" value="Зеленые слоны" name="service[]">
    <input type="text" value="Ростов-на-Дону, ул. Ленина, 27" name="address[]">
    <a class="getCoord" href="#">&gt;&gt;</a>
    <input type="text" value="47.283138, 39.620546" name="coord[]">
    <a class="deleteRow" href="#">x</a>
    <input type="hidden" value="628" name="tid[]">
    <input type="hidden" value="33" name="sid[]">
  </div>
</div>

<input type="button" id="saveBtn" value="Сохранить" class="btn btn-success"><div id="output"></div>

2
  • что значит не очень гуманно?
    – Grundy
    Commented 8 апр. 2016 в 20:40
  • @grundy может row .map() return input .map() return val() было бы элегантнее? Не смог. Commented 9 апр. 2016 в 5:09

1 ответ 1

1

В данном случае each используется, в качестве map, поэтому его можно на него и заменить.

_dataSend.data = $('.row').map(function(index, element) {...})

Однако, map возвращает объект jQuery, следовательно, для получения обычного массива, нужно добавить вызов toArray

Из функции map, нужно вернуть объект, но так как функция find возвращает ArrayLike объект jQuery, можно воспользоваться функцией reduce.

[].reduce.call(
        $(this).find('input'), function(acc, el) {
          acc[$(el).attr('name').slice(0, -2)] = $(el).val();
          return acc;
        },{})

Кроме того, стоит подумать о хранении имени в отдельном дата атрибуте. это позволит избавится от slice

Пример:

$(function() {

  //сохранить
  $('#saveBtn').on('click', _saveDepts);

  //сохранение отделений
  function _saveDepts() {

    var _dataSend = {};
    _dataSend.action = 2;

    //тестовые данные
    _dataSend.test = [{
      "id": "3179",
      "nid": "37",
      "oid": "1",
      "town": "Ростов-на-Дону",
      "service": "Красные слоны",
      "address": "Ростов-на-Дону, ул. Вокзальная, 7",
      "coord": "47.222531, 39.718705",
      "tid": "628",
      "sid": "32"
    }, {
      "id": "3180",
      "nid": "37",
      "oid": "2",
      "town": "Ростов-на-Дону",
      "service": "Красные слоны",
      "address": "Ростов-на-Дону, ул. Тракторная, 37",
      "coord": "47.264931, 39.68827",
      "tid": "628",
      "sid": "32"
    }]


    //формирую массив данных
    _dataSend.data = $('.row').map(function(index, element) {
      return [].reduce.call(
        $(this).find('input'), function(acc, el) {
          acc[$(el).attr('name').slice(0, -2)] = $(el).val();
          return acc;
        },{});
    }).toArray();
    //конец

    console.log(_dataSend);
    $('#output').html(JSON.stringify(_dataSend));

    $.ajax({
        url: 'query.php',
        type: 'POST',
        dataType: 'json',
        data: _dataSend
      })
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("error");
      });
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-inline" id="rows">
  <div class="row">
    <input type="hidden" value="3179" name="id[]">
    <input type="text" value="37" name="nid[]">
    <input type="text" value="1" name="oid[]">
    <input type="text" value="Ростов-на-Дону" name="town[]">
    <input type="text" value="Красные слоны" name="service[]">
    <input type="text" value="Ростов-на-Дону, ул. Вокзальная, 7" name="address[]">
    <a class="getCoord" href="#">&gt;&gt;</a>
    <input type="text" value="47.222531, 39.718705" name="coord[]">
    <a class="deleteRow" href="#">x</a>
    <input type="hidden" value="628" name="tid[]">
    <input type="hidden" value="32" name="sid[]">
  </div>
  <div class="row">
    <input type="hidden" value="3178" name="id[]">
    <input type="text" value="39" name="nid[]">
    <input type="text" value="1" name="oid[]">
    <input type="text" value="Ростов-на-Дону" name="town[]">
    <input type="text" value="Зеленые слоны" name="service[]">
    <input type="text" value="Ростов-на-Дону, ул. Ленина, 27" name="address[]">
    <a class="getCoord" href="#">&gt;&gt;</a>
    <input type="text" value="47.283138, 39.620546" name="coord[]">
    <a class="deleteRow" href="#">x</a>
    <input type="hidden" value="628" name="tid[]">
    <input type="hidden" value="33" name="sid[]">
  </div>
</div>

<input type="button" id="saveBtn" value="Сохранить" class="btn btn-success">
<div id="output"></div>

7
  • @DmitriySimushev, спасибо, не обратил внимания :)
    – Grundy
    Commented 9 апр. 2016 в 10:35
  • Изначально форма сабмитилась без js, поэтому имена nid[] для формирования массива $_REQUEST[ ]. Подумал возможно пригодится еще. Commented 9 апр. 2016 в 11:17
  • @Jean-Claude, я имел ввиду добавить атрибут data-name - и в скрипте его использовать. а не обычный name - в котором оставить стандартную запись, на случай отключенного js
    – Grundy
    Commented 9 апр. 2016 в 11:19
  • а что за аргументы в коллбеке reduce - acc, el - должны же быть вроде previousValue, currentValue? call подменяет их на другие аргументы, как понять на какие? Commented 9 апр. 2016 в 19:00
  • @Jean-Claude, в callback'е для reduce, количество параметров как было так и осталось, и по приведенной ссылке показано. что их 4, а не 2. Единственное отличие в вызовах функций func() и finc.call() - то что первый параметр для call - это контекст. т.е. следующие вызовы эквивалентны: a.func() ~ a.func.call(a). Подробнее в справке по call
    – Grundy
    Commented 9 апр. 2016 в 19:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.