Get JSON data from Controller to Dropdown in View

Question

I am new to MVC and do not know how to solve this problem.

In a controller I have a list (filled with Api data) serialized to JSON, I need to use this JSON data do populate a dropdown in a View.

I am confused as to what should I return from the controller, what should I be doing next, am I doing this right?

For now I have this:

Model:

public class Tablet {        
    public int Id { get; set; }
    public string ManufactureDate { get; set; }
    public string Description { get; set; }
    public string Country { get; set; }
}

DataController.cs

 Public ActionResult GetData(Tablet tablet)
 {
     List<Tablet> data = new List<Tablet>();

      // ... Code to retrieve the data from API

     string jsonRes = JsonConvert.SerializeObject(data);

     return View(jsonRes);
 }

In the view I need to show the ID in a dropdown:

View.cshtml

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "/Data/GetData/",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">' + '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});  
</script>

are you populating your List<Tablet> data before serializing it? — Cid
– Cid, Commented Apr 3, 2019 at 12:22
Yes, the list is filled with API data before serialization. It is showing the data as json object in console too. So, the problem for me is passing this json to the View. — wizardress
– wizardress, Commented Apr 3, 2019 at 12:23
Change s += '<option value="' + jsonRes[i].Id+ '">' + '</option>'; to s += '<option value="' + jsonRes[i].Id+ '">' +jsonRes[i].Id+ '</option>'; You are only assigning value. But there is no display. Please change this as per the code I have given. Also please make sure you have the values filled in the list. — Jyothish Bhaskaran
– Jyothish Bhaskaran, Commented Apr 3, 2019 at 12:24
Please review this link : stackoverflow.com/questions/30084568/… it is very close to your question. — Mahavir Kumbharvadia
– Mahavir Kumbharvadia, Commented Apr 3, 2019 at 12:27
@JyothishBhaskaran I did that and it returns 'undefined' in the dropdown. — wizardress
– wizardress, Commented Apr 3, 2019 at 12:27

user10954641 · Accepted Answer · 2019-04-03 13:09:31Z

0

Try this, you are setting Value, you are not setting Text for Option Tag, you must be getting blank menu items.Have tested it using your data link and code.

s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';

Complete HTML:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<select class="dropdown" id="dropdownData"></select>

<script>
$(document).ready(function () {
    $.ajax({
        url: "https://api.myjson.com/bins/6jd1s",
        type: 'GET',
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id+ '">'+jsonRes[i].Id + '</option>';
            }
             $("#dropdownData").html(s);
        }
    });
});  
</script>
</body>
</html>

edited Apr 3, 2019 at 13:09

answered Apr 3, 2019 at 12:59

user10954641

731 silver badge8 bronze badges

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

11 Comments

wizardress Over a year ago

This works great, thanks! but the problem is I need to take this data from a json in my controller, not from an URL :)

user10954641 Over a year ago

Are you getting data in same format as from your data link? Try logging (in console) data from data link and from controller, are they same?

wizardress Over a year ago

I am not getting anything from the controller, while the data from the data link is as it should be. I think I am not doing something right in my controller..

user10954641 Over a year ago

return Json(data, JsonRequestBehavior.AllowGet);

user10954641 Over a year ago

try Mario's answer above, instead of using string jsonRes = JsonConvert.SerializeObject(data); you can also use return Json(data, JsonRequestBehavior.AllowGet);

|

MarioMendieta · Accepted Answer · 2019-04-03 13:38:22Z

0

Try this:

DataController:

[HttpGet]
public JsonResult GetData()
{
    List<Tablet> data = new List<Tablet>();

    // ... Code to retrieve the data from your API

    string jsonRes = JsonConvert.SerializeObject(data);

    return new JsonResult(jsonRes);
}

In your JavaScript:

 $.ajax({
        url: "/Data/GetData/",
        type: "GET",
        dataType: "json",
        cache: false,
        success: function (data) {
            try {
                var parsedData = JSON.parse(data);

                var $select = $('#dropdownData');
                $.each(parsedData, function(i, dataItem) {
                    $('<option>', {
                        value: dataItem.Id
                    }).html(dataItem.Id).appendTo($select);  // or dataItem.Description, or whatever field you want to display to the user
                });
            }
            catch (err) {
                console.log(err);
            }
        }
    },
    error: function (e) {
        console.log(e);
    }
});

edited Apr 3, 2019 at 13:38

answered Apr 3, 2019 at 13:26

MarioMendieta

3121 silver badge10 bronze badges

1 Comment

wizardress Over a year ago

In my controller at 'return new JsonResult(jsonRes)'; it throws the following error "'JsonResult' does not contain a constructor that takes 1 arguments"

Jyothish Bhaskaran · Accepted Answer · 2019-04-05 10:30:19Z

Remove the line string jsonRes = JsonConvert.SerializeObject(data);

Also your method GetdData() should return JSON. Check the following code.

public ActionResult GetData(Tablet tablet)
    {
        List<Tablet> data = new List<Tablet>();

        data.Add(new Tablet() { Id = 1, Country = "India", Description = "Test", ManufactureDate = DateTime.UtcNow.ToShortDateString() });
        data.Add(new Tablet() { Id = 1, Country = "Canada", Description = "Test1", ManufactureDate = DateTime.UtcNow.ToShortDateString() });

        //string jsonRes = JsonConvert.SerializeObject(data);

        return Json(data,JsonRequestBehavior.AllowGet);
    }

View Should be like

<select class="dropdown" id="dropdownData"></select>
<script>
$(document).ready(function () {
    $.ajax({
        url: "/Home/GetData/",
        type: 'GET',
        dataType: "json",
        success: function (jsonRes) {
            console.log(jsonRes[i]);
            var s = '<option value="-1">Please Select</option>';
            for (var i = 0; i < jsonRes.length; i++) {
                s += '<option value="' + jsonRes[i].Id + '">' + jsonRes[i].Id+ '</option>';
            }
            $("#dropdownData").html(s);
        }
    });
});
</script>

Collectives™ on Stack Overflow

Get JSON data from Controller to Dropdown in View

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related