Loop nested array values using jQuery

Question

Using the following JSON below, how do I loop the inner Errors and Messages values using jQuery:

JSON Format:

{
   "PagesCreated":0,
   "AssetsCreated":0,
   "AssetsUpdated":0,
   "Messages":[
      "Test message!",
      "Test message!",
      "Test message!"
   ],
   "Errors":[
      "Test error!",
      "Test error!",
      "Test error!"
   ],
   "EllapsedTime":"00:00:00.0000382"
}

Current jQuery in place on ajax success call:

$.each(data, function (key, value) {
    if (key == "PagesCreated") {
        console.log(value); // works
    }
    else if (key == "AssetsCreated") {
        console.log(value); // works
    }
    else if (key == "AssetsUpdated") {
        console.log(value); // works
    }
    else if (key == "EllapsedTime") {
        console.log(value); // works
    }
    else if (key == "Messages") {
        // TODO - How do I loop inner Messages values here?
    }
    else if (key == "Errors") {
        // TODO - How do I loop inner Errors values here?
    }
});

If it helps this is the c# object I am serializing to json:

public class MyObj
{
    public int PagesCreated { get; set; }
    public int AssetsCreated { get; set; }
    public int AssetsUpdated { get; set; }
    public TimeSpan EllapsedTime { get; set; }
    public List<string> Messages { get; set; }
    public List<string> Errors { get; set; }
}

Thanks for the help!

Lazar Nikolic · Accepted Answer · 2021-12-10 08:20:56Z

1

You can use .each method again:

$.each(data, function (key, value) {
    if (key == "PagesCreated") {
        console.log(value); // works
    }
    else if (key == "AssetsCreated") {
        console.log(value); // works
    }
    else if (key == "AssetsUpdated") {
        console.log(value); // works
    }
    else if (key == "EllapsedTime") {
        console.log(value); // works
    }
    else if (key == "Messages") {
        $.each(value, function (innerKey, innerValue) {
           console.log(innerValue);
       }
    }
    else if (key == "Errors") {
        $.each(value, function (innerKey, innerValue) {
           console.log(innerValue);
       }
    }
});

answered Dec 10, 2021 at 8:20

Lazar Nikolic

4,4041 gold badge26 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

seanrco Over a year ago

Thanks, that worked perfectly! I originally tried something similar, but was only doing: $.each(value) { }});

seanrco Over a year ago

FYI, your example is missing closing tag just in case somebody runs into issue.

mplungjan · Accepted Answer · 2021-12-10 09:19:27Z

1

Please do not use jQuery to loop arrays. Plain JS works well and can be reused in all frameworks

You can test the type and react accordingly

const data = { "PagesCreated": 0, "AssetsCreated": 0, "AssetsUpdated": 0, "Messages": [ "Test message!", "Test message!", "Test message!" ], "Errors": [ "Test error!", "Test error!", "Test error!" ], "ElapsedTime": "00:00:00.0000382" };

Object.entries(data).forEach(([key, value]) => {
  if (typeof value == "object") {
    console.log(key, value.join(", "))
  } else console.log(key, value)
});

jQuery version - only difference is $.each(data,(key, value) => {

const data = { "PagesCreated": 0, "AssetsCreated": 0, "AssetsUpdated": 0, "Messages": [ "Test message!", "Test message!", "Test message!" ], "Errors": [ "Test error!", "Test error!", "Test error!" ], "ElapsedTime": "00:00:00.0000382" }

$.each(data,(key, value) => { 
  if (typeof value == "object") {
    console.log(key, value.join(", "))
  } else console.log(key, value)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Dec 10, 2021 at 9:19

answered Dec 10, 2021 at 8:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

2 Comments

seanrco Over a year ago

Thanks for the example using plain js. Alternatives are always good. However, the question was specific to jQuery so accepted the other answer as it was more relevant.

mplungjan Over a year ago

I added a jQuery version. I just had to change to $.each(data,(key, value) => {

Collectives™ on Stack Overflow

Loop nested array values using jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related