TypeError: Cannot set property 'data_id' of undefined

Question

I have some issue with my js code and I don't know how to fix it Here is my code :

  $('#btn_valid').click(function(){

    var data = new Array();
    var data_id;
    var data_picture;
    var data_title;
    var data_p_picture;
    var data_p_title;
    var data_s_picture;
    var data_s_title;
    var data_reaction;
    var data_datetime;
    var i = 0;


    $('.cbx_ac:checked').each(function(){

      data_id = $(this).attr('data-id');
      data_picture = $(this).attr('data-picture');
      data_title= $(this).attr('data-title');
      data_p_picture = $(this).attr('data-p_picture');
      data_p_title = $(this).attr('data-p_title');
      data_s_picture = $(this).attr('data-s_picture');
      data_s_title = $(this).attr('data-s_title');
      data_reaction = $(this).attr('data-reaction');
      data_datetime = $(this).attr('data-datetime');

      console.log(data_id); // I Get a value here ( 2564115647_15498456665 )

      data[i]['data_id'] = data_id;  //Error here :  Uncaught TypeError: Cannot set property 'data_id' of undefined
      i++;

    })
    console.log(data);
  })

And I get this error I try to set data[i] = [] but seems not to be the solution :

Error here :  Uncaught TypeError: Cannot set property 'data_id' of undefined

Answer 1

The issue is because data[i] is undefined. You're therefore attempting to set a property of undefined, hence the error.

To fix this you need to first create an object in data[i], like this:

data[i] = {};
data[i]['data_id'] = data_id;
// and so on...

However it is worth noting that you can massively simplify this logic and DRY it up. When you access the data() method of an element it will return all its attributes in an object. As such, so long as the attribute names match the property names of the object you want to create, you can just apply that to an array using map():

$('#btn_valid').click(function() {
  var data = $('.cbx_ac:checked').map(function() {
    return $(this).data();
  }).get();
  console.log(data);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="cbx_ac" data-id="id1" data-picture="pic1" data-title="title1" checked="true" />
<input type="checkbox" class="cbx_ac" data-id="id2" data-picture="pic2" data-title="title2" />
<input type="checkbox" class="cbx_ac" data-id="id3" data-picture="pic3" data-title="title3" checked="true" />
<input type="checkbox" class="cbx_ac" data-id="id4" data-picture="pic4" data-title="title4" />
<input type="checkbox" class="cbx_ac" data-id="id5" data-picture="pic5" data-title="title5" />

<button id="btn_valid">Test</button>

Note that the example above is missing some of the data attributes in the HTML, but that's just for brevity. You can easily add them all in your production version.

Answer 2

You need to set it to a Map first:

data[i] = new Map();
data[i]['data_id'] = data_id;

Answer 3

You are getting error as data[i] is not defined as an array.

if you define

    data[i] = {}; 

after that below statement will work.

    data[i]['data_id'] = data_id;

Answer 4

data[i] is undefined so

Simply Change

data[i] = {};
data[i]['data_id'] = data_id;

$('#btn_valid').click(function(){

    var data = new Array();
    var data_id;
    var data_picture;
    var data_title;
    var data_p_picture;
    var data_p_title;
    var data_s_picture;
    var data_s_title;
    var data_reaction;
    var data_datetime;
    var i = 0;


    $('.cbx_ac:checked').each(function(){

      data_id = $(this).attr('data-id');
      data_picture = $(this).attr('data-picture');
      data_title= $(this).attr('data-title');
      data_p_picture = $(this).attr('data-p_picture');
      data_p_title = $(this).attr('data-p_title');
      data_s_picture = $(this).attr('data-s_picture');
      data_s_title = $(this).attr('data-s_title');
      data_reaction = $(this).attr('data-reaction');
      data_datetime = $(this).attr('data-datetime');

      console.log(data_id); // I Get a value here ( 2564115647_15498456665 )
       data[i] = {};
      data[i]['data_id'] = data_id;  //Error here :  Uncaught TypeError: Cannot set property 'data_id' of undefined
      i++;
   

    })
    console.log(data);
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn" id="btn_valid" value="Click Me" />
<input type="checkbox" data-id="data-id" data-picture="pic1" data-title="title1" id="scales" class="cbx_ac" name="feature"
               value="scales" checked />