Question 69908 in Ajax Question posted in
You can find the official documentation here.

Loop nested array values using jQuery – Jquery ajax

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!

Tags:

2

Answers


  1. 0

    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);
       }
    }
});
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search