The $.each function seems to be stuck and not cycling through the

Question

The $.each function seems to be stuck and not cycling through the

Dealing with a rather intricate JSON structure, I'm encountering difficulty iterating through it using the $.each() function. It seems to be related to the unusual 2-dimensional array passed in the value section of the standard array (hopefully that makes sense). Since I am new to Ajax and JSON, I just need some advice on the most effective way to manage JSON returned via an AJAX Call. Thank you!

$.ajax({
        type: 'POST',
        url: 'model.php',
        data: formData,
        dataType: 'json',
         encode : true 
        }).done(function(data){
        
                        var i = 0;
                      
                        for(var k in data){ 
                            window.alert(k);  
                        }   //this works         
            
                      $.each(data, function(key, value){ //however this does not display anything
                         
                          window.alert("should be outputted");
                          window.alert("key" + key + "value" + value[i]['email']);
                          i++;
                          
                      });
                  });

Here is the JSON snippet I'm working with:

{"bodge.com":[{"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="157872777760647655777a7172703b767a78">[email protected]</a>",... etc.

javascript json ajax

Answer 1

Answer №1

Your JSON structure contains two levels of data:

an object with keys ("bodge.com", "bodge.com "), and

each key has an array of objects

{
    "bodge.com": [
        {"email":"[email protected]","orders":"2","value":"19.67"},
        {"email":"[email protected]","orders":"5","value":"21.89"},
        ...
        {"email":"[email protected]","orders":"1","value":"23.88"},
        {"email":"[email protected]","orders":"8","value":"5.37"}
    ],
    "bodge.com ": [
        {"email":"[email protected] ","orders":" 9 ","value":" 21.22"}
    ]
}

To navigate through this data structure, you will need to iterate through it using at least two levels of iteration:

$.each(data, function(domain, objects) {
    console.log(domain); // will output "bodge.com" or "bodge.com "
    $.each(objects, function(index, x) {
        console.log(x.email);
        console.log(x.orders);
        console.log(x.value);
        console.log(index); // will show the position of x within the array
    });
});

Keep in mind that you're using $.each for iterating over object keys and values, as well as items in an array.

An alternative approach is to use Object.keys to get an array of object keys, combined with the forEach method:

Object.keys(data).forEach(function(domain) {
    console.log(domain); // will display "bodge.com" or "bodge.com "
    data[domain].forEach(function(x, index) {
        console.log(x.email);
        console.log(x.orders);
        console.log(x.value);
        console.log(index); // will show the position of x within the array
    });
});

Answer 2

Your JSON structure contains two levels of data:

an object with keys ("bodge.com", "bodge.com "), and

each key has an array of objects

{
    "bodge.com": [
        {"email":"[email protected]","orders":"2","value":"19.67"},
        {"email":"[email protected]","orders":"5","value":"21.89"},
        ...
        {"email":"[email protected]","orders":"1","value":"23.88"},
        {"email":"[email protected]","orders":"8","value":"5.37"}
    ],
    "bodge.com ": [
        {"email":"[email protected] ","orders":" 9 ","value":" 21.22"}
    ]
}

To navigate through this data structure, you will need to iterate through it using at least two levels of iteration:

$.each(data, function(domain, objects) {
    console.log(domain); // will output "bodge.com" or "bodge.com "
    $.each(objects, function(index, x) {
        console.log(x.email);
        console.log(x.orders);
        console.log(x.value);
        console.log(index); // will show the position of x within the array
    });
});

Keep in mind that you're using $.each for iterating over object keys and values, as well as items in an array.

An alternative approach is to use Object.keys to get an array of object keys, combined with the forEach method:

Object.keys(data).forEach(function(domain) {
    console.log(domain); // will display "bodge.com" or "bodge.com "
    data[domain].forEach(function(x, index) {
        console.log(x.email);
        console.log(x.orders);
        console.log(x.value);
        console.log(index); // will show the position of x within the array
    });
});

Answer 3

Answer №2

One could improve the code by passing data['bodge.com'] instead of just data into the each function.

Answer 4

One could improve the code by passing data['bodge.com'] instead of just data into the each function.

Answer 5

Answer №3

Here is a potential solution you can consider:

$.ajax({
    type: 'POST',
    url: 'model.php',
    data: formData,
    dataType: 'json',
     encode : true 
    }).done(function(data){

var response = JSON.parse(data);     

                  $.each(response, function(index){
                     alert(response[index].your_filed);
                  });            
});

Answer 6

Here is a potential solution you can consider:

$.ajax({
    type: 'POST',
    url: 'model.php',
    data: formData,
    dataType: 'json',
     encode : true 
    }).done(function(data){

var response = JSON.parse(data);     

                  $.each(response, function(index){
                     alert(response[index].your_filed);
                  });            
});

The $.each function seems to be stuck and not cycling through the

Answer №1

Answer №2

Answer №3

Similar questions

Why won't JSZip accept a base64 string for loading a zip file?

What are the steps to verify if an iframe is lacking content?

Continuously encountering an unforeseen token k in JSON at the starting position while making a python request

PHP can be executed and accessed directly from JavaScript without the need for any form submission

Ensuring radio button validation remains visible even after selecting a button with Formik and Yup

Is it possible to use ng-src to point to a file stored locally?

Issue with populating JSON data into jQuery Datatable

A guide on setting up dual observables in Angular 2

Using a javascript variable in php within the Laravel framework

Sending state data in an Axios POST request

Unveiling Elements as You Scroll Within a Specified Area

The focus and blur events for the document in a content editable iframe are not activated by Chrome

Fetch external navigation and refresh hyperlinks

How can specific times be disabled using Laravel-9 jQuery Timepicker?

The AjaxUpdate property of Yii's CGridView allows for dynamic and seamless

Obtaining the value of a JSON object in PHP when its key contains dots

jquery makes it easy to create interactive hide and show effects

Ways to add the class "active" to the initial element in a Vue.js for loop

Restore Bootstrap Dropdown values to their initial settings when clicked

Establishing the controller to set the default order