複数の配列から選択してdivを作成するJSON

Question

私はjsonで本当に新しく、selectを使用してjsonデータからいくつかの情報を表示しようとしています。それが可能だ？？

[ 
{ 
    "id": 1, 
    "country": "Spain", 
    "more": [ 
     { 
     "city": "Barcelona", 
     "age": 1992, 
     "language": "catalan", 
     }, 
     { 
     "city": "Madrid", 
     "age": 2001, 
     "language": "spanish", 
     } 
    ] 
}, 
{ 
"id": 2, 
"country": "Portugual", 
"more": [ 
    { 
     "city": "Porto", 
     "age": 2009, 
     "language": "portuguese", 
    }, 
    { 
    "city": "Madeira", 
    "age": 1997, 
    "language": "portuguese", 
    } 
    ] 
} 
] 

ので、私はこれで動作することを選択し、ファイル.jsファイルています

var json = '[{"id":1,"country":"Spain","more"[{"city":"Barcelona","age":1992,"language":"catalan",},{"city":"Madrid","age":2001,"language":"spanish",}]},{"id":2,"country":"Portugual","more":[{"country":"Porto","age":2009,"language":"portuguese",},{"country":"Madeira","age":1997,"language":"portuguese",}]}]'; 

var items = JSON.parse(json); 
var $selectElement = $("#list"); 

$(items).each(function(){ 
    var option = '<option value="' + this.id + '">' + this.city + '</option>'; 
    $selectElement.append(option); 
}); 

をこれが私のHTML

<div class="form-group"> 
    <label>Select the city:</label> 
    <select class="form-control" id="list" name="list"> 
    </select> 
</div> 

<div id="info"> 
    <h1><span class="city"> </span></h2> 
    <h2><span class="age"> </span></h2> 
    <h3><span class="language"> </span></h3> 
</div> 

で、今私は、国を選択したときにしたいと思いますjson-情報からHTML "more"を読み込み、selectでオプションを変更すると変更されます。 誰かが私を助けることができるなら、私は感謝します！

EDIT - すべての回答が完全に機能します。私は使用することを選んだ質問を受け入れました！ - ありがとう！

Answer 1

JSONは、オブジェクトを持つオブジェクトを持つオブジェクトを持つ配列です。したがって、配列をループして、選択したオプションに必要な値を取得する必要があります。 これはFiddleになります。

$('body').on('change', '#list', function() { 
    var selectedOption = this.value; 
    $(items).each(function() { 
    if (this.id.toString() === selectedOption) { 
     $('#info').html(returnData(this.more)); 
     return; 
    } 
    }) 
}) 

var returnData = function(arr) { 
    var t = ''; 
    console.log(arr) 
    $(arr).each(function() { 
    var objKeys = Object.keys(this); 
    console.log(objKeys) 
    var s = '' 
    for (var i = 0; i < objKeys.length; i++) { 
     s += '<h' + (i + 1) + '><span class="' + objKeys[i] + '">' + this[objKeys[i]] + '</span></h' + (i + 1) + '>'; 
     console.log(s, objKeys[i]) 
    } 
    t += s; 
    }); 
    return t; 
} 

Answer 2

あなたはをループにこの方法を使うとmoreから値を取得することができます

$("#list").on('change', function() { 
    var id = $(this).val(); 
    $('#info').empty(); 
    $(items).each(function() { 
    if (this.id == id) { 
     $(this.more).each(function() { 
     $('#info').append('<h1><span class="city">' + this.city + ' </span></h1>' + 
      '<h2><span class="age"> ' + this.age + '</span></h2>' + 
      '<h3> <span class="language">' + this.language + ' </span></h3>'); 
     }); 
    } 
    }); 
}); 

はここで働いてFiddleです。それを行うのが最も簡単な方法です。

Answer 3

selectを1つ以上使用する必要がある場合は、selectを複数必要とするか、国情報と都市情報（2つのループ）を組み合わせる必要があります。以下は、2つのselectの要素を使用する方法である：タイプミス...：あなたの `のvar json`が無効なJSON（`行方不明 `）です

var items = [{ 
 
    "id": 1, 
 
    "country": "Spain", 
 
    "more": [ 
 
     { 
 
     "city": "Barcelona", 
 
     "age": 1992, 
 
     "language": "catalan", 
 
     }, 
 
     { 
 
     "city": "Madrid", 
 
     "age": 2001, 
 
     "language": "spanish", 
 
     } 
 
    ] 
 
}, 
 
{ 
 
"id": 2, 
 
"country": "Portugual", 
 
"more": [ 
 
    { 
 
     "city": "Porto", 
 
     "age": 2009, 
 
     "language": "portuguese", 
 
    }, 
 
    { 
 
    "city": "Madeira", 
 
    "age": 1997, 
 
    "language": "portuguese", 
 
    } 
 
    ] 
 
}], 
 
    opt = $('<option/>'), 
 
    sel = $('#list'), 
 
    city = $('#city'), 
 
    info = $('#info'); 
 

 
$.each(items, function(i, item) { 
 
    opt.clone().val(item.id).text(item.country).data('cities', item.more).appendTo(sel); 
 
}); 
 

 
sel.on('change', function() { 
 
    city.empty(); 
 
    var data = $('option:selected',this).data('cities'); 
 
    $.each(data, function(j, cty) { 
 
     opt.clone().val(j).text(cty.city).data('city', cty).appendTo(city); 
 
    }); 
 
    city.change(); 
 
}) 
 
.change(); 
 

 
city.on('change', function() { 
 
    var cityData = $('option:selected',this).data('city'); 
 
    info.find('.city').html(cityData.city); 
 
    info.find('.age').html(cityData.age); 
 
    info.find('.language').html(cityData.language); 
 
}) 
 
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-2 form-group"> 
 
    <label for="sel1">Select Country:</label> 
 
    <select class="form-control" id="list" name="list"> 
 
    </select> 
 
</div> 
 

 
<div class="col-lg-2 form-group"> 
 
    <label for="sel1">Select the city:</label> 
 
    <select class="form-control" id="city" name="city"> 
 
    </select> 
 
</div> 
 

 
<div class="col-lg-2 info" id="info"> 
 
    <h1><span class="city"> </span></h2> 
 
    <h2><span class="age"> </span></h2> 
 
    <h3> <span class="language"> </span></h3> 
 
</div>