如何在JQuery中获取正确的数组长度

Question

I don't know why I getting 2020 array length what process I am missing Please run this code into browser and see result,please give me feedback which I am missing.

 var offline_rijksmuseum_child_barcodes_array = new Array(); var offline_rijksmuseum_child_barcodes_new = new Array(); var news = '[{"2018":["testeer","testeer2","testeer3"],"2019":["sd","sd2","sd3"]},{"2018":["dfg"],"2019":["praafd"]}]'; var obj = $.parseJSON(news); var i = 0; $.each(obj, function (i, objectData) { i++; if(i == 1) { $.each(objectData, function (key, obj_new) { if(key == '2018') { offline_rijksmuseum_child_barcodes_array[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_array); } if(key == '2019') { offline_rijksmuseum_child_barcodes_array[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_array); } }); } else if(i == 2) { $.each(objectData, function (key, obj_new) { if(key == '2018') { offline_rijksmuseum_child_barcodes_new[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_new); } if(key == '2019') { offline_rijksmuseum_child_barcodes_new[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_new); } }); } }); console.log(offline_rijksmuseum_child_barcodes_array.length, offline_rijksmuseum_child_barcodes_array); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

Arrays make sense for ordered lists of data (which should not have blank spots, such as with sparse arrays). Your offline_rijksmuseum_child_barcodes_array is a spare array - you're assigning to an index when [index - 1] does not exist in the array - which results in a very odd structure - 2017 <empty> elements followed by two actual elements. You might consider using an object instead of an array:

var offline_rijksmuseum_child_barcodes_array = {};
var offline_rijksmuseum_child_barcodes_new = {};

To get the "length" of the resulting object, you can check the length of its keys :

Object.keys(offline_rijksmuseum_child_barcodes_array).length

That way, lines like

offline_rijksmuseum_child_barcodes_array[key] = obj_new;

will only result in associating the property name [key] with the value obj_new , without also causing spare-array weirdness (like the making the .length of the collection huge in the process).

 // var x = ['vdf','dsgfdsfds','dsgfdfgdsfds']; // console.log(x); var offline_rijksmuseum_child_barcodes_array = {}; var offline_rijksmuseum_child_barcodes_new = {}; var news = '[{"2018":["testeer","testeer2","testeer3"],"2019":["sd","sd2","sd3"]},{"2018":["dfg"],"2019":["praafd"]}]'; var obj = $.parseJSON(news); var i = 0; $.each(obj, function(i, objectData) { i++; if (i == 1) { $.each(objectData, function(key, obj_new) { if (key == '2018') { offline_rijksmuseum_child_barcodes_array[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_array); } if (key == '2019') { offline_rijksmuseum_child_barcodes_array[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_array); } }); } else if (i == 2) { $.each(objectData, function(key, obj_new) { if (key == '2018') { offline_rijksmuseum_child_barcodes_new[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_new); } if (key == '2019') { offline_rijksmuseum_child_barcodes_new[key] = obj_new; //console.log(offline_rijksmuseum_child_barcodes_new); } }); } }); console.log(offline_rijksmuseum_child_barcodes_array); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

would suggest to construct a new obj like tmpObj and push key & value and then push tmpObj into array. and you will get the array lenght also.

temp object construction

var tmpObj = {};
tmpObj[key] = tmpObj[key] || [];
tmpObj[key].push(obj_new);

try below code snippet.

 var offline_rijksmuseum_child_barcodes_array = new Array(); var offline_rijksmuseum_child_barcodes_new = new Array(); var news = '[{"2018":["testeer","testeer2","testeer3"],"2019":["sd","sd2","sd3"]},{"2018":["dfg"],"2019":["praafd"]}]'; var obj = $.parseJSON(news); var i = 0; $.each(obj, function (i, objectData) { i++; if(i == 1) { $.each(objectData, function (key, obj_new) { var tmpObj = {}; if(key == '2018') { tmpObj[key] = tmpObj[key] || []; tmpObj[key].push(obj_new); offline_rijksmuseum_child_barcodes_array.push(tmpObj ); } if(key == '2019') { tmpObj[key] = tmpObj[key] || []; tmpObj[key].push(obj_new); offline_rijksmuseum_child_barcodes_array.push(tmpObj); } }); } else if(i == 2) { $.each(objectData, function (key, obj_new) { var tmpObj = {}; if(key == '2018') { tmpObj[key] = tmpObj[key] || []; tmpObj[key].push(obj_new); offline_rijksmuseum_child_barcodes_new.push(tmpObj); } if(key == '2019') { tmpObj[key] = tmpObj[key] || []; tmpObj[key].push(obj_new); offline_rijksmuseum_child_barcodes_new.push(tmpObj); } }); } }); console.log(offline_rijksmuseum_child_barcodes_array.length, '---', offline_rijksmuseum_child_barcodes_array); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>