Loop nested array values using jQuery-CodePudding

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!

CodePudding user response：

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);
       }
    }
});

CodePudding user response：

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>