Tips for iterating through an array of objects nested within other objects

Question

Tips for iterating through an array of objects nested within other objects

Good afternoon everyone,

I’m having trouble accessing the attributes of a JavaScript object array through AJAX. Can anyone spot where I might be going wrong?

View image description

This is my AJAX call:

$("#cbx1").on("change", function() {

var checkbox = $("#cbx1").val();
console.log(checkbox);
if(checkbox == "TF") {
    var url = "/listar-perguntas?area-tematica=" + $(this).val() + "&montar-navegadores=true";
    console.log("bateu aqui 1"+url);
} else {
    var url = "/listar-perguntas?area-tematica=" + $(this).val();
    console.log("bateu aqui 2"+url);
} 

$.ajax({
    type:'GET',
    data : "",
    url: url,
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        console.log(data);
        let text = "<input>" 
        for (let x in data) {
            text += "<label>" + data[x] + "</label>"
        }
        text += "</input>"
        document.getElementById("temaFederal").innerHTML = text;
    },
    error: function(data){
        console.log(data.statusText);
    }
});

In my HTML, it appears as follows:

See image description here

javascript json ajax

Answer 1

Answer №1

To locate the object containing your label, start by searching for it in the 10th position on the list. If the element is consistently at the last position, you can use data[data.length -1] to select the final object at the root level of your list. Once you have identified the object, access the bucket where your labels are stored using data[data.length - 1]?.teamnavigator?.bucket. You can then iterate through this list.

Alternatively, you can search for the element first and retrieve your bucket list in a similar manner:

const data = [
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { 
        areatematicanavigator: {},
        temanavigator: {
            bucket: [
                {
                    key: 'key',
                    label: 'label',
                },
                {
                    key: 'key',
                    label: 'label',
                }
            ]
        }
        
    }
]

const objectOfInterest = data.find(item => 'temanavigator' in item)

const buckets = objectOfInterest.temanavigator.bucket
for (let index in buckets) {
    console.log(buckets[index].label);
}

Correction: This marks my debut response on stackoverflow. Please excuse any novice errors I might have made.

Answer 2

To locate the object containing your label, start by searching for it in the 10th position on the list. If the element is consistently at the last position, you can use data[data.length -1] to select the final object at the root level of your list. Once you have identified the object, access the bucket where your labels are stored using data[data.length - 1]?.teamnavigator?.bucket. You can then iterate through this list.

Alternatively, you can search for the element first and retrieve your bucket list in a similar manner:

const data = [
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { pergunta: 'lorem ipsum', guid: '1111'},
    { 
        areatematicanavigator: {},
        temanavigator: {
            bucket: [
                {
                    key: 'key',
                    label: 'label',
                },
                {
                    key: 'key',
                    label: 'label',
                }
            ]
        }
        
    }
]

const objectOfInterest = data.find(item => 'temanavigator' in item)

const buckets = objectOfInterest.temanavigator.bucket
for (let index in buckets) {
    console.log(buckets[index].label);
}

Correction: This marks my debut response on stackoverflow. Please excuse any novice errors I might have made.

Tips for iterating through an array of objects nested within other objects

Answer №1

Similar questions

Discovering the closest major urban area using geonames

What is the best way to extract Key:Value pairs from a JSON JArray?

Tips for choosing a single checkbox from a set of multiple checkboxes in React.js

Incorrect footer navigation on my Vuepress website

javascript has a funny way of saying "this is not equal to this" (well,

What is the method for displaying a file using a binary string as input?

Can Hapi-Joi validate a payload consisting of either an Array of objects or a plain Javascript object?

Check the status of a server using Json with the help of Alamofire and SwiftyJson

Retrieve JSON data from a WordPress site that is powered by WooCommerce, using basic authentication

Utilizing JavaScript to assign class names to dynamically created elements from objects

What could be the reason for JSON.parse not returning the expected outcome?

Refreshing a page occurs every 30 seconds or upon the user submitting a form

Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

Tips for retrieving selected items in an array object

What are the benefits of using default ES module properties for exporting/importing compared to named module properties?

In AngularJs, use ng repeat and ng switch to dynamically generate and display tables

Using an Angular interface for an HTTP request: The statusText message reads as "Error: Unable to Determine."

Using Node.js to invoke an identifier loop

After removing an item from the component in reactJS, the immediate rendering of the dynamic component does not seem to be functioning correctly

Show the time with AM/PM without displaying the year, month, or day