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

Activate all chosen CSS circles

Grabbing the mouse in Firefox

Using the forEach method, we can create multiple buttons in ReactJS and also access the onClick handler

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

There appears to be an issue with Mongoose Unique not functioning properly, as it is allowing

Swapping out the contents of a div with an external PHP file within the Laravel 3 framework

Returning multiple values in JSON response from AJAX call using ViewBag

JavaScript class name modifications are not functioning as expected

Tips for displaying subtotal in a Vue application using Firebase Realtime Database

What is the process for retrieving data from a Lotus view and converting the results to a JSON format?

What is the best way to showcase Vue data of a selected element from a v-for loop in a

Having trouble with Laravel 5.5 and ajax file uploads?

What is the reason that the for loop updates all indexes in Node.js?

Identifying asynchronous JavaScript and XML (AJAX) requests using Express in NodeJS

What is the best way to trigger an AJAX function every 15 seconds?

Issue with Vue.js: Nested field array is triggering refresh with inaccurate information

Extract information from a JSON string and link it to XAML code

Coat the div with a uniform shade of pure white

Error: "Access-Control-Allow-Origin" header is missing in Firebase Function

Extract information from an array located inside a nested object