No data appears to be populating the Javascript data list, yet no errors are being displayed in

Question

No data appears to be populating the Javascript data list, yet no errors are being displayed in

I'm facing an issue where I have data that I'm using to create two arrays, but they both end up empty without any errors in the console.

Below is the data:

mydata = {
    "id": "661",
    "name": "some name",
    "description": "some desc",
    "subcat": {
        "662": {
            "id": "662",
            "name": "sub 1",
            "translations": null
        },
        "663": {
            "id": "663",
            "name": "sub 2",
            "translations": null
        }
    },
    "image": null
};

Here is the code snippet:

chList=[];
thList=[];
thCount=[];

for (var i = 0; i < mydata.length; i++) {

    var obj = mydata[i];

    var cl = obj.name;

    if (obj.subcat != null) {
        chList.push(cl);
    }

    if(obj.subcat) {

        if (i < 10) {

            var nme = obj.subcat.map( function(item){
                return item.name;
                console.log(nme);
            });

            thList = thList.concat(nme);
            thCount.push(nme.length);
        }

    }

}

console.log(thList);
console.log(thCount);

The issue here is that both thList and thCount end up empty as shown: []

What can be done to fix this problem?

javascript

Answer 1

Answer №1

To determine the length of the data stored in mydata, you can utilize the Object.keys method.

var length = Object.keys(mydata);

Answer 2

To determine the length of the data stored in mydata, you can utilize the Object.keys method.

var length = Object.keys(mydata);

Answer 3

Answer №2

mydata.length is not defined because you are attempting to access the length property, which does not exist on the Object myData. Due to this, the loop iteration does not work and as a result, your arrays thList , thCount remain empty.

In Javascript, the length property exists on Arrays. If you try to access a property that is not part of the object, Javascript will return undefined

If you want to access the properties of the object, you can iterate over the enumerable properties like this:

for (var property in mydata ) {
    if (mydata.hasOwnProperty(property)) {
        // Your code here
    }
}

Additionally, the statement var obj = mydata[i]; will not work in this case because mydata is not an array. If you define mydata as an array, then the statement var obj = mydata[i]; will work as expected.

Answer 4

mydata.length is not defined because you are attempting to access the length property, which does not exist on the Object myData. Due to this, the loop iteration does not work and as a result, your arrays thList , thCount remain empty.

In Javascript, the length property exists on Arrays. If you try to access a property that is not part of the object, Javascript will return undefined

If you want to access the properties of the object, you can iterate over the enumerable properties like this:

for (var property in mydata ) {
    if (mydata.hasOwnProperty(property)) {
        // Your code here
    }
}

Additionally, the statement var obj = mydata[i]; will not work in this case because mydata is not an array. If you define mydata as an array, then the statement var obj = mydata[i]; will work as expected.

Answer 5

Answer №3

It appears that your assumption is that mydata should contain an array of objects, rather than just a single object as shown. To optimize your code, consider wrapping the single object presented for mydata inside an array, and possibly adding similar objects to it.

Furthermore, the line obj.subcat.map will not function as intended since subcat is not an array. Instead, you should utilize map with Object.keys(obj.subcat) to access obj.subcat using the keys obtained.

By making these two adjustments, your code can function correctly:

// mydata should be an array
mydata = [{
    "id": "661",
    "name": "some name",
    "description": "some desc",
    "subcat": {
        "662": {
            "id": "662",
            "name": "sub 1",
            "translations": null
        },
        "663": {
            "id": "663",
            "name": "sub 2",
            "translations": null
        }
    },
    "image": null
}];

var chList=[];
var thList=[];
var thCount=[];

for (var i = 0; i < mydata.length; i++) {
    var obj = mydata[i];
    var cl = obj.name;
    if (obj.subcat != null) {
        chList.push(cl);
    }
    if(obj.subcat) {
        if (i < 10) {
            // You need to use Object.keys to iterate over an object
            var nme = Object.keys(obj.subcat).map( function(key){
                var item = obj.subcat[key]; // retrieve item by key
                return item.name;
                // Note: console.log after `return` will not execute
            });
            thList = thList.concat(nme);
            // Consider repeating 'nme.length' times:
            thCount = thCount.concat(Array(nme.length).fill(nme.length));
        }
    }
}

console.log(thList);
console.log(thCount);

Answer 6

It appears that your assumption is that mydata should contain an array of objects, rather than just a single object as shown. To optimize your code, consider wrapping the single object presented for mydata inside an array, and possibly adding similar objects to it.

Furthermore, the line obj.subcat.map will not function as intended since subcat is not an array. Instead, you should utilize map with Object.keys(obj.subcat) to access obj.subcat using the keys obtained.

By making these two adjustments, your code can function correctly:

// mydata should be an array
mydata = [{
    "id": "661",
    "name": "some name",
    "description": "some desc",
    "subcat": {
        "662": {
            "id": "662",
            "name": "sub 1",
            "translations": null
        },
        "663": {
            "id": "663",
            "name": "sub 2",
            "translations": null
        }
    },
    "image": null
}];

var chList=[];
var thList=[];
var thCount=[];

for (var i = 0; i < mydata.length; i++) {
    var obj = mydata[i];
    var cl = obj.name;
    if (obj.subcat != null) {
        chList.push(cl);
    }
    if(obj.subcat) {
        if (i < 10) {
            // You need to use Object.keys to iterate over an object
            var nme = Object.keys(obj.subcat).map( function(key){
                var item = obj.subcat[key]; // retrieve item by key
                return item.name;
                // Note: console.log after `return` will not execute
            });
            thList = thList.concat(nme);
            // Consider repeating 'nme.length' times:
            thCount = thCount.concat(Array(nme.length).fill(nme.length));
        }
    }
}

console.log(thList);
console.log(thCount);

Answer 7

Answer №4

Consider attempting the following approach.

for (let item in customobject) {
    // retrieve your information in this manner 
    customobject[item].anything
}

Answer 8

Consider attempting the following approach.

for (let item in customobject) {
    // retrieve your information in this manner 
    customobject[item].anything
}

No data appears to be populating the Javascript data list, yet no errors are being displayed in

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Complete and automatically submit a form in a view using AngularJS

Using local storage with github sites can lead to some unexpected and peculiar behavior

Displaying XML data using d3js

Javascript puzzle - I have 99 obstacles

Switching players every two turns in a JavaScript AngularJS game

What is the best way to eliminate all click event handlers with jQuery?

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

Is it possible to integrate Processing JS on top of an HTML element?

Is it possible to perform a local multipleSearch programmatically using free-jqgrid?

using JQuery, add a class on click event or on page load

Issue with Select2: When using a remote select2 control, the tab key press does not allow for the selection of the highlighted

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

How do webpack imports behave within a ReactJS project?

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

Having trouble with JavaScript not functioning correctly within the Update Panel?

The appearance of an unforeseen * symbol caused a

React - the elusive nature of variable mutation

Ways to implement variable face sizes in three.js meshes

What is the process for incorporating an npm package into an HTML document?

Mongoose: Unable to fetch item using its specific identification - Error 404