Блог

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

Как создать объект в этом формате

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать объект для отправки в AJAX-запросе в нужном мне формате. В коде я могу получить name атрибут для каждого input элемента и его значение, но мне нужно создать объект в приведенном ниже формате. Как я могу это создать?

 {
  "userrole":"",
  "userAttributes":{
    "username":"alks",
    "useraddress":"ajdaa",
    "usercity":"lajsdk"
  }
}
  
 <div class="data-fields-container">
  <div class="input-type" data-attr-name="userrole">
    <input type="text" name="userrole">
  </div>
  <div class="input-type" data-attr-name="username">
    <input type="text" name="username">
  </div>            
  <div class="input-type" data-attr-name="useraddress">
    <input type="text" name="useraddress">
  </div>
  <div class="input-type" data-attr-name="usercity">
    <input type="text" name="usercity">
    </div>
  </div>    
  <button id="submit_data">Submit</button>
  
 $(document).ready(function() {
  $('#submit_data').on('click', function() {
    $('.data-fields-container > .input-type').each(function() {
      dataobj = {};
      var attrkey = $(this).attr('data-attr-name');
      var attrval = $(this).find('input').val();
    })

    $.ajax(function() {
      url: "https://map.net/api/v44",
      data: dataobj,
      type: 'POST',
      dataType: 'Json',
      success: function(data) {
        console.log('successful')
      },
      error: function(request, error) {
        console.log('failed')
      }
    })
  })
})

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

1. К вашему сведению, такого понятия, как «объект JSON», не существует. JSON — это метод сериализации структуры данных, позволяющий передавать ее. То, что вы пытаетесь создать, — это просто объект. Я отредактировал вопрос, чтобы удалить ссылки на JSON, поскольку это не имеет отношения к этому.

Ответ №1:

Вы могли бы сопоставить serializeArray() результат и сконструировать свой объект следующим образом:

 $(document).ready(function() {
  $('#submit_data').on('click', function() {
    var dataobj = {userrole: $('[name="userrole"]').val()};

    var attr = $('.data-fields-container input:not([name="userrole"])').serializeArray().map(function(o) {
      this[o.name] = o.value;
      return this;
    }.bind({}))[0];

    dataobj['userAttributes'] = attr;

    console.log(dataobj);
  })
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data-fields-container">
  <div class="input-type" data-attr-name="userrole">
    <input type="text" name="userrole">
  </div>

  <div class="input-type" data-attr-name="username">
    <input type="text" name="username">
  </div>

  <div class="input-type" data-attr-name="useraddress">
    <input type="text" name="useraddress">
  </div>

  <div class="input-type" data-attr-name="usercity">
    <input type="text" name="usercity">
  </div>
</div>

<button id="submit_data">Submit</button>

Ответ №2:

 dataObj = {
    "userrole":document.querySelector('div.input-type input[name="userrole"]').value,
    "userAttributes":{
        "username":document.querySelector('div.input-type input[name="username"]').value,
        "useraddress":document.querySelector('div.input-type input[name="useraddress"]').value,
        "usercity":document.querySelector('div.input-type input[name="usercity"]').value
    }
}

Вам не нужно перебирать входные данные, поскольку ваш формат JSON статичен.