Read and bind list property from ajax response to dropdownlist [duplicate]

I have a dropdown in cshtml and making a ajax call for onchange event. This event makes an api call and gets a response as model. In this model I have a property of docCategoryList of List<> type. Below is the code for onchange event which makes api call

 public async Task<JsonResult> GetDoc(string selectedId) {
modelOut = await _api.getDoc(modelIn);
return Json(new { data = modelOut});
} 

Ajax response enter image description here In ajax response, I am getting response. But when I am trying to read the list property I am getting error as “Cannot read properties of undefined”

 console.log(response.docCategoryList[0][0].docCategory);
    $.each(response, function (val, item) {
      console.log(val, item);
      $('#ddlCategory').append('<option value="' + item.docCategory + '">' + item.docCategory +     '</option>');
  });

Any help would be appreciated.

I tried looping through the list but getting the same error.