TypeError: Cannot set property 'data_id' of undefined

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


4 Answers
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 />

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

data[i]

undefined

undefined

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

data[i]

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():

data()

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.

data

You need to set it to a Map first:

Map

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


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;


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.