asp.net mvc3 return multiple json list

Question

Im asp.net mvc3 c# code returns json list like this:

return Json(new { name = UserNames, imageUrl = ImageUrls });

UserNames and ImageUrls are both List<string> types

And this is my javascript

function StartSearch(text) {
    $.ajax({
        url: '/Shared/Search',
        type: 'POST',
        data: { SearchText: text },
        dataType: 'json',
        success: function (result) {
            $.each(result, function (i, item) {
                alert(result[i].name);
            });
        }
    });
}

How I can get names and ImageUrls?

Thanks

Answer 1

Access name as a property of result like this result.name[i]

Essentially, result will contain name and imageUrl which are both arrays, just like you have defined in your anonymous type, so your code should be modified like this to display an alert for each name in the name array

function StartSearch(text) {
    $.ajax({
        url: '/Shared/Search',
        type: 'POST',
        data: { SearchText: text },
        dataType: 'json',
        success: function (result) {
            $.each(result.name, function (i, item) {
                alert(item);
           });
        }
    });
}

as $each iterates over the items in the name array, it will pass the item to the second parameter of your call back, i.e. item.

so

$.each(result.name, function (i, item) {
    alert(item);
});

will popup each name.

Notes:

You may want to change the properties on your anonymous type to reflect that they are a collection:

return Json(new { UserNames = UserNames, ImageUrls = ImageUrls });

this way it will make more sense when you iterate over them in your success function.

As AlfalfaStrange pointed out, I didn't demonstrate how you might access both arrays. Which made me think, what is the relationship between user names and image urls?

Is this a list of images for a user? Maybe what you should consider is creating a specific model for this. For instance, UserDisplayModel:

public class UserDisplayModel
{
    public string UserName {get;set;}
    public string ImageUrl {get;set;}
}

In your controller return a list of UserDisplayModels. If this is the case, you'll have to rethink why they are two separate lists in the first place. Maybe ImageUrl should be a field on the User table.

So now, when you're returning a single list, e.g.

List<UserDisplayModel> users = //get users from db
return Json(new { Users = Users});

you can iterate them in one go in js code:

       $.each(result.Users, function (i, item) {
            alert(item.Name);
            alert(item.ImageUrl);
        });

Answer 2

This alerts the value of Name from each record of each list.

$.each(result, function (i, item) {
    for (var x = 0; x < result.FirstList.length; x++) {
        alert(result.FirstList[x].Name);
        alert(result.SecondList[x].Name);
    }
});

This assumes your Json response if formed correctly. Like this:

return Json(new { FirstList = results, SecondList = otherResults }, JsonRequestBehavior.AllowGet);

---

But as a side note, I see other problems with your code that you need to address

1. You're actually not performing a POST, you're searching based on input. Change POST to GET in your Ajax call
2. Change your action return line to allow for the get and make sure your are returning a JsonResult.

3. Naming conventions for C# method parameters call for Pascal-casing. Use a lowercase letter for first character

   public JsonResult Search(string searchText) {
       ....
       return Json(new { name = UserNames, imageUrl = ImageUrls }, JsonRequestBehavior.AllowGet);
   }