HTML выпадающего из JSON строки

Question

У меня есть строкаJSON, который выглядит как этот

[ 
    { 
    "offset":1, 
     "result": 
      [ 
       { 
       "host":"x.x.x.x", 
       "count":"123" 
       } 
      ] 
      }, 
    {"offset":2,"result":[{"host":"y.y.y.y","count":"1123"}]} 
] 

Я хочу, чтобы заполнить выпадающих выбрать в HTML, чтобы показать мне только список «хозяина» из JSON нить. Im уже использует фреймворк bootstrap. есть ли способ сделать это в бутстрапе? если не jquery?

Answer 1

Вы должны использовать parseJSON для этого

HTML код

<div> 
    <select id="showDrop"> 
     <option value="">Select One</option> 
    </select>  
</div> 

Script использовать эти данные JSon

var jsonData = '[{"offset":1,"result":[{"host":"x.x.x.x","count":"123"}]},{"offset":2,"result":[{"host":"y.y.y.y","count":"1123"}]}]'; 

var obj = $.parseJSON(jsonData); 

var dropOption = '<option value="'+obj[0].result[0].host+'">'+obj[0].result[0].host+'</option><option value="'+obj[1].result[0].host+'">'+obj[1].result[0].host+'</option>' 

$('#showDrop').append(dropOption); 

Working Jsfiddle

Answer 2

вот простая реализация той же JSON в JavaScript и самонастройки

HTML

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="list"></ul> 
</div> 

JS

var json = [ 
    { 
     "offset":1, 
     "result": 
      [ 
       { 
       "host":"x.x.x.x", 
       "count":"123" 
       } 
      ] 
    }, 
    { 
     "offset":2, 
     "result": 
      [ 
       { 
        "host":"y.y.y.y", 
        "count":"1123" 
       } 
      ] 
    } 
]; 
var htmlStr = ""; 
json.forEach(function(x){ 
    var li = '<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + x.result[0].host +' </a></li>'; 
    htmlStr += li; 
}); 

$('#list').html(htmlStr); 

https://jsfiddle.net/jigardafda/p4x8mke2/