Viewbag Dropdown list from javascript always undefined

Question

I try to make dynamically multiple input with dropdown list, My select list is using viewbag and the result is always undefined.

The Viewbag List

private void ToolCategories(object selectedcat = null)
{
      var catQuery = from d in db.Toolcategories
                     where d.In == "AD" 
                     orderby d.CategoryName
                     select d;
      SelectList ToolCategories = new SelectList(catQuery, "CategoryId", "CategoryName", selectedcat);
      ViewBag.ToolCategories = ToolCategories;
}

The View

@using System.Text.Json;

<script>
var resin = document.createElement("div");
resin.setAttribute("class", "col-md-4");
var resinGrup = document.createElement("div");
resinGrup.setAttribute("class", "form-grup");
var resinLabel = document.createElement("label");
resinLabel.setAttribute("class", "form-label fs-6");
resinLabel.innerHTML = "Tool";
var jsonObj = @Html.Raw(JsonSerializer.Serialize(ViewBag.ToolCategories));
var resinSelect = document.createElement("select");
resinSelect.setAttribute("id", "CategoryId");
resinSelect.setAttribute("class", "form-control");
resinSelect.setAttribute("required", "");
resinSelect.setAttribute("name", `[${toolID}].ToolCategories`);
$.each(jsonObj, function (index, ToolCategories) {
  var option = document.createElement("option");
  option.value = ToolCategories.CategoryId;
  option.text = ToolCategories.CategoryName;
  resinSelect.append(option);
})
</script>

Answer 1

My select list is using viewbag and the result is always undefined.

Well, your undefined dropdown is pretty obvious because you have used SelectList which keeps data as Text and Value pairs. Thus, you are binding it within your $.each loop as CategoryId and CategoryName but the items is not residing there as it is. As you can see below:

Solution:

You need to modify your option binding as option.value = ToolCategories.Value; instead of ToolCategories.CategoryId;

Thereofore, complete code would be:

$.each(jsonObj, function (index, ToolCategories) {
                console.log(ToolCategories);
                var option = document.createElement("option");
                option.value = ToolCategories.Value;
                option.text = ToolCategories.Text;
                resinSelect.append(option);
            });

Output:

Note: If you still need further details on it, please have a look on our official document here.

Answer 2

Seems everything looks fine except below 2 lines, in your view file.. Replace your Category Id with Value and CategoryName with Text.

option.value = ToolCategories.Value; option.text = ToolCategories.Text;

You are getting undefined as it failed to find values but required values mapped to different properties.