選択オプション値でJsonを使用する - 二重引用符によるエラー

Question

選択フォーム入力のオプションリストを返すajaxリクエストがあります。私はアドレスを表すために各オプションの価値についてjsonを持っています。ただし、二重引用符で問題が発生し、最初の{だけがバックエンドに返されます。

chrome devツールの値を見ると、chromeで認識される値が最初の{であり、json全体ではないことがわかります。どのようにしてjson値を正しく保持するためにselectの値を得ることができますか？ブラウザに表示されます

オプションの値は次のとおりです。

<option value="{" dept":="" "",="" "orgn":="" "pobx":="" "subb":="" "bnam":="" "aspen",="" "bnum":="" "dpth":="" "thor":="" "knoll="" road",="" "ddlo":="" "dplo":="" "town":="" "",="" "cnty":="" "surrey",="" "pcod":="" "gu9="" 2XZ",="" "ppco":="" "tpco":="" 2ep"}"="">ASPEN</option> 

アヤックスのイベントは次のとおりです。

$(document).ready(function() { 
    $('#id_previous2_postcode').change(function() { 
    var postcode2 = $(this).val() 
    console.log(postcode2) 
    $.ajax({ 
     url: '/users/prior_addresses_ajax/', 
     data: { 
     'postcode': postcode2 
     }, 
     dataType: 'json', 
     success: function (data) { 
     options = data.property_choices.map(function (subarray) { 
      return '<option value="' + subarray[0] + '">' + subarray[1] + '</option>' 
     }) 
     $('#id_previous2_full_address').html(options) 
     } 
    }) 
    }) 
}) 

Answer 1

あなたは文字列の連結を避けるためにnew Optionコンストラクタを使用することができます。これは任意の文字列値に対して機能します。

const data = { 
 
    property_choices: [ 
 
    ['value1', 'text1'], 
 
    ['value2', 'text2'], 
 
    ['value3', 'text3'] 
 
    ] 
 
}; 
 

 
const select = document.querySelector('#id_previous2_full_address'); 
 

 
data.property_choices.forEach(subarray => { 
 
    const option = new Option(subarray[1], subarray[0]); 
 
    select.options.add(option); 
 
});

<select id="id_previous2_full_address"> 
 
    <option>None</option> 
 
</select>

あなたは値がオブジェクトではなく上記の私の例のような文字列である場合JSON.stringify(subarray[0])を呼び出す必要があります。