unable to bind drop down to API[Answered] RSS

• • Reply
  GeorgeTheCod...

  Member

  2 Points

  30 Posts

  unable to bind drop down to API

  Jul 10, 2020 04:29 PM|GeorgeTheCoder|LINK

  On my View I have a dropdown that I want to bind data from a controller that's not the one the View is using. When I call the API directly I get data back, (http://localhost:2020/Makes/GetAll) this returns me all makes we have in inventory.

   View page. 

  I even fully qualified the URL and still no data in the dropdown

  <tr>  
      <td>Make</td>  
      <td> @Html.DropDownList("ShowMakes", new SelectList(Enumerable.Empty  
          <SelectListItem>())) </td>  
  </tr>  

  <script type="text/javascript">  
      $(document).ready(function() {  
          $.ajax({  
              url: "/Makes/GetAll",  
              type: "GET",  
              contentType: "application/json; charset=utf-8",  
              datatype: "JSON",  
              success: function(data) {  
                  $(data).each(function() {  
                      $("#ShowMakes").append($("<option></option>").val(this.makeId).html(this.MakeName));  
                  });  
              },  
              error: function(data) {}  
          });  
      });  
  </script>  

  Data:

  {"data":
  [
    {
       "makeId": 1,
       "makeName": "Ford"
    },
    {
       "makeId": 2,
       "makeName": "Dodge"
    },
    {
       "makeId": 3,
       "makeName": "Nissan"
    }
  
  
  ]}

• • Reply
  asteranup

  All-Star

  20953 Points

  4984 Posts

  Re: unable to bind drop down to API

  Jul 10, 2020 04:52 PM|asteranup|LINK

  GeorgeTheCoder

  $(data).each(function() {
                      $("#ShowMakes").append($("<option></option>").val(this.makeId).html(this.MakeName));
                  });

  Issue is here-

  $(data).each(function(i, item) {  
                      $("#ShowMakes").append($("<option></option>").val(item.makeId).html(item.MakeName));  
                  });  

  Thanks,
  Anup Das Gupta
  Visit My Blog
  You can also connect with me in LinkedIn
• • Reply
  mgebhard

  All-Star

  53751 Points

  24069 Posts

  Re: unable to bind drop down to API

  Jul 10, 2020 04:58 PM|mgebhard|LINK

  There are a couple of issue your code.  If we consider the JSON is correct then the array is in the data property. JavaScript is case sensitive so use makeName not MakeName.

  $(data.data).each(function () {
      $("#ShowMakes").append($("<option></option>").val(this.makeId).html(this.makeName));
  });