How to get correct array Length in 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>

• Nirali: what should be your final output?

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>

• CertainPerformance: When an answer solves your problem, consider marking it as Accepted to indicate that the issue is resolved :)

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>