Заполнение поля выбора с результатами массива JSON

Question

Так что я пытаюсь заполнить поле выбора в моем html объектами массива с использованием результатов JSON, я так долго смотрел на весь этот код, я не думаю, что я видя простое решение моей проблемы. Это моя функция обратного вызова, где я заполняю поле выбора. Запрос JSON прошел отлично, но я каждый раз застрял в пустой коробке.

function getArtistsCallBack() 
    { 
     if (req.readyState == 4) { 
      if (req.status == 200) { 
       // TO DO: populate artistlist select box using JSON 
       var response = req.responseText.parseJSON(); 
       var artistSelect = document.getElementById("artistlist"); 
       for (i=0;i<response.artistsarray.length;i++){ 
        var artist_id = response.artistsarray[i].artist; 
        var artist = response.artistsarray[i].artist;    
        artistSelect.options[artistSelect.options.length] = new Option(artist, artist_id, false, true); 

       } 
      } 
     } 
    } 

В данном случае это поле выбора в HTML для ссылки;

<div id="artistscontent"> 
     <select id="artistlist"></select> 

     </div> 

Это artists.php, где база данных запрашивается для массива объектов, массива, который используется ранее;

<?php 
    // Include utility files 
    require_once 'include/config.php'; 

    // Load the database handler 
    require_once BUSINESS_DIR . 'database_handler.php'; 

    // Load Business Tier 
    require_once BUSINESS_DIR . 'collection.php'; 

    $artistsarray = Collection::GetArtists(); 
    print json_encode($artistsarray); 

    $jsonresponse='{"artistsarray":['; 
    foreach($artistsarray as $artist => $row)    
    { 
     $artist_id=$artist+1; 
     $artist=$row['artist']; 
     $jsonresponse .= '"artist_id":"' . $artist_id . '"},'; 
     $jsonresponse .= '"artist:"' . $artist . '"},'; 

    } 
    $jsonresponse .= ']}'; 
    echo $jsonresponse; 
?>  

Любая помощь была бы высоко оценена! Благодаря!

Answer 1

Вам нужно использовать длину json для массива параметров и сделать это вне цикла for. Затем используйте options.add

var json = [{key:'1', value:'value1'},{key:'2', value:'value2'}] 
    var artistSelect = document.getElementById("artistlist"); 
    artistSelect.options[json.length]; 
    $.each(json, function(key, value){ 
    console.debug(value); 
    artistSelect.options.add(new Option(value.key, value.value)); 
    }); 

Выезд этот plunker: http://plnkr.co/edit/i3A6mo672CskXvbstWsu?p=preview

Answer 2

artistSelect.options не является массивом, то необходимо использовать add метод:

var opt = new Option(artist, artist_id); 
artistSelect.options.add(opt);