如何在对象数组中动态添加 id 属性？

Question

I have a simple section in which a user can add movie details using a form. I am taking the values entered by the user and creating an object from them which I pushing in to an array. However I also want to include a dynamic ID for each added movie.

$("#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');
    }
  });
});

The above solution gives me this

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

I want movieid to increment dynamically eg movieid: 1 , movieid: 2 etc. What do I need to do to get what I want?

Answer 1

From your code, you can use the index in the callback in the $.each

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

To understand the callback, see the jquery documentation https://api.jquery.com/jQuery.each/

---

Alternatively you can also use the jsonData.length

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

Answer 2

Try this:

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


    });

or

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


    });

These are just simple examples that can only be used if you are not gonna delete items from an array.

Answer 3

You can put a parameter in the callback function. The parameters are (index, array), but you would only need index.

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

Answer 4

Most of the solution provided by friends here are not well constructed, they don't give a perfect solution to my problem.

Most of the common problems were pointed out by @Randy Casburn

Here is my solution I found out working perfectly, I thought it will be good to share, maybe will help someone out there.

my json file looks like this

{
    "movies": [
        {
            "title": "sdsds",
            "movieurl": "https:\/\/meed.audiencevideo.com\/videos\/good_job.mp4",
            "movieid": 1,
            "buttons": []
        },
        {
            "title": "sdsds",
            "movieurl": "https:\/\/meed.audiencevideo.com\/videos\/do_you_want.mp4",
            "movieid": 2,
            "buttons": []
        },
  ]
}

Here is my js

function getNextMovieId() {
        var nextmovieid = 0;
        for (var a = 0; a < movies.length; a++) {
                if( movies[a].movieid>nextmovieid ) {
                        nextmovieid = movies[a].movieid;
                }
        }
        nextmovieid++;
        return nextmovieid;
}

  $("#btnAddMovie").click(function(e){

   var formData = $("#movieForm").serializeArray();
                             console.log(formData);
                             movies.push({
                                title: formData[0].value,
                                movieurl: formData[1].value,
                                movieid:  getNextMovieId(),
                                buttons: []
                            });

})