Блог

Я пытаюсь заполнить выпадающий список, используя следующие данные JSON:

 [
  {
    "id": "1",
    "name": "Unknown"
  },
  {
    "id": "2",
    "name": "Chrome"
  },
  {
    "id": "3",
    "name": "Firefox"
  },
  {
    "id": "4",
    "name": "Internet Explorer"
  },
  {
    "id": "5",
    "name": "Edge"
  },
  {
    "id": "6",
    "name": "Safari"
  },
  {
    "id": "7",
    "name": "Mobile Chrome"
  },
  {
    "id": "8",
    "name": "Mobile Safari"
  },
  {
    "id": "9",
    "name": "Opera"
  }
]
  

Вот мой код:

 $(document).ready(function () {
  $.getJSON("http://www.randyconnolly.com/funwebdev/services/visits/browsers.php", function(results){
      var $el = $("#filterBrowser");
      $el.empty(); // remove old options
      $el.append($("<option></option>")
      .attr("value", '').text('Please Select'));
      
      $.each(results, function (index, value) {
          $el.append($("<option></option>")
          .attr("value", value).text(value));

        });
    });
});
  

Выпадающий список заполняется неправильно, и он возвращается

[объект Object]

вместо «Неизвестно, Chrome, Firefox, Internet Explorer и так далее.

value В вашем each — это объект, поэтому вам нужны конкретные имена свойств (id и name) для передачи в значение и текст новых параметров

 var $el = $("#filterBrowser");
$el.empty(); // remove old options
$el.append($("<option></option>")
  .attr("value", '').text('Please Select'));

$.each(results, function(index, value) {
  $el.append($("<option></option>")
    .attr("value", value.id).text(value.name));
                  // ^^ id              ^^ name

});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="filterBrowser"></select>

<script>
 const results=[{id:"1",name:"Unknown"},{id:"2",name:"Chrome"},{id:"3",name:"Firefox"},{id:"4",name:"Internet Explorer"},{id:"5",name:"Edge"},{id:"6",name:"Safari"},{id:"7",name:"Mobile Chrome"},{id:"8",name:"Mobile Safari"},{id:"9",name:"Opera"}];
</script>