Блог

Главная - Вопросы по программированию - Как создать многомерный объект json на основе различных входных данных формы

Как создать многомерный объект json на основе различных входных данных формы

#jquery #json

Вопрос:

У меня есть форма, в которой я буду читать все элементы управления и создавать объект Json, она отлично работает, когда у меня есть один набор элементов управления. Теперь в моей форме у меня есть несколько наборов, таких как выбор файла, когда они выбирают файл, я хотел бы добавить Json и объединить его с другим json, чтобы это было похоже

 {
  firstName: "1",
  lastName: "pqr"
},
{ "files" : [ {
   FileName: 'xyz.jpg',
   data: [object ArrayBuffer],
}]

В настоящее время мой код выглядит следующим образом с двумя отдельными объектами Json

 {
  firstName: "1",
  lastName: "pqr"
}
{
    Splash.JPG: [object ArrayBuffer]
}

Вот код, который я хотел бы разработать, чтобы он дал мне желаемый результат

 var button = $("button");
var id;
var obj = {};
var divId = $('#myForm');
var fileArray = [];
// handle click and add class
button.on("click", () => {
  var map = divId.find('input').map(function() {
    //var $item = $(this);
    if ($(this).prop('type') === "checkbox" || $(this).prop('type') === "radio") {
      id = $(this).attr("name");
      obj[id] = $(this).is(':checked');
    } else if ($(this).prop('type') !== "button" amp;amp;
      $(this).prop('type') !== "file") {
      id = $(this).attr("name")
      //console.log($item.attr("name"));
      return {
        id: $(this).val()
      }
    } else if ($(this).prop('type') == "file") {
      var files = $(this)[0].files;
      //alert(files);
      for (var i = 0; i < files.length; i  ) {
        // var arr = readTheFile(files[i], getFileInfo, obj);
        fileArray.push({
          [this.id]: readTheFile(files[0], getFileInfo)
        });
        return {
          fileArray
        };
      }
    }
  }).get();
  var v = JSON.stringify(map);
  alert(v);
});


function getFileInfo(header) {
  var obj = {};
  $.each(header, function(i, item) {
    obj[item.FileName] = item.data;
  });
  alert(obj);
  return obj;
}

function readTheFile(file, callback) {
  var ObjArray = [];
  var fileReader = new FileReader();
  //alert(file);
  fileReader.filename = file.name;
  fileReader.onload = function(e) {
    var bits = e.target.resu<
    var Object = {
      FileName: e.target.filename,
      data: bits
    };
    ObjArray.push(Object);
    callback(ObjArray);
  };
  fileReader.readAsArrayBuffer(file);
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myForm">
  <input id="file-attach" type="file" name="uploadFile[]" multiple="multiple" />
  <br><br>
  <input type='text' name='firstName' id='firstName' />
  <br><br>
  <input type='text' name='lastName' id='lastName' />
  <br><br>
  <button>Submit</button>
</div>

Комментарии:

1. Кое-как обратный вызов не передает данные, он всегда звонит после результата

Метки: