首页 > 解决方案 > 如何在对象数组中动态添加 id 属性?

问题描述

我有一个简单的部分,用户可以在其中使用表单添加电影详细信息。我正在获取用户输入的值并从中创建一个对象,然后将其推送到数组中。但是,我还想为每个添加的电影包含一个动态 ID。

$("#btnAddMovie").click(function(e) {
  console.log('btn-movie triggered');

  var jsonData = [];
  var formData = $("#movieForm").serializeArray();

  $.each(formData, function() {
    console.log(formData);
    jsonData.push({
      title: formData[0].value,
      movieurl: formData[1].value,
      movieid: '1'
    });
  });

  console.log(jsonData);

  var params = JSON.stringify({
    movies: jsonData
  });

  $.ajax({
    type: 'POST',
    data: {
      params: params
    },
    url: 'save_to_json.php',
    success: function(data) {
      $('#msg').html(data).fadeIn('slow');
      $('#msg').delay(2000).fadeOut('slow');
    },
    error: function() {
      $('#error-msg').html(data).fadeIn('slow');
      $('#error-msg').delay(2000).fadeOut('slow');
    }
  });
});

上面的解决方案给了我这个

{
  "movies": [{
    "title": "fdfdfd",
    "movieurl": "http:\/\/meed.audiencevideo.com\/videos",
    "movieid": "1"
  }, {
    "title": "fdfdfd",
    "movieurl": "http:\/\/meed.audiencevideo.com\/videos",
    "movieid": "1"
  }]
}

我想movieid动态增加例如movieid: 1movieid: 2。我需要做什么才能得到我想要的?

标签: javascriptjqueryarrays

解决方案


从您的代码中,您可以在回调中使用索引$.each

....
$.each(formData, function(index) {
   console.log(formData);
   jsonData.push({
      title: formData[0].value,
      movieurl: formData[1].value,
      movieid: index + 1
    });
  });
...

要了解回调,请参阅 jquery 文档https://api.jquery.com/jQuery.each/


或者,您也可以使用jsonData.length

....
$.each(formData, function(index) {
   console.log(formData);
   jsonData.push({
      title: formData[0].value,
      movieurl: formData[1].value,
      movieid: jsonData.length + 1
    });
  });
...

推荐阅读