JSONを入力で使用するJavaScript

Question

私は単純なアプリを作ろうとしています。私は以下の考え方を持っています。私はユーザーが都市を選ぶことができる2つの入力フィールドを持っており、私は結果を得たいJSONも持っています。今私が望むのは、ユーザーがどの都市を選ぶかによって異なる結果になるということです。これは私のオブジェクト（JSON）です：

var cities = { 
    "newyork": { 
     "newyork": 0, 
     "washington": 50, 
     "sacramento": 100, 
     "miami": 150   
    }, 
    "washington": { 
     "washington": 0, 
     "newyork": 50, 
     "sacramento": 100, 
     "miami": 150 
    } 
}; 

これは私のHTMLです：ユーザーが第二の最初の入力で、ニューヨークを選択し、サクラメント：私が達成したいものの

<form> 
    <select id="firstInput" onchange="calculatePrice()"> 
     <option value="newyork">newyork</option> 
     <option value="washington">washington</option> 
     <option value="sacramento">sacramento</option> 
     <option value="miami">miami</option> 
    </select> 
    <select id="secondInput" onchange="calculatePrice()"> 
     <option value="newyork">newyork</option> 
     <option value="washington">washington</option> 
     <option value="sacramento">sacramento</option> 
     <option value="miami">miami</option> 
    </select> 
</form> 
<div id="output">Output: 500</div> 

例。出力は50に変更されます。ご覧のとおり、JSONまたはJSのオブジェクトからデータをロードします。

は、これが私のJSです：

function calculatePrice() { 

    var x = document.getElementById("firstInput").value; 
    console.log(x); 
    var y = document.getElementById("secondInput").value; 
    console.log(y); 
    console.log(cities.x.y); 
    document.getElementById("output").innerHTML = "Output: " + cities.x.y; 

} 

しかし、このコードを使用して、私は次のエラーを取得する：私は（y）をCONSOLE.LOGとき、それは正常に動作しているように見えるので、
Uncaught TypeError: Cannot read property 'y' of undefined
は、これが混乱して。
誰もがこれを手伝ってくれますか？ https://jsbin.com/laluzawuda/edit?html,js,console,output

Answer 1

cities.x.yはcities[x][y]する必要があります：あなたはより良い外観を持つことができるので、ここで はJSBinです。 cities.x.yは、citiesにxという名前のプロパティーを検索しますが、そのプロパティーの値をプロパティー名として使用しません。 http://stackoverflow.com/questions/4244896/dynamically-access-object-propertyを参照してください。

function calculatePrice() { 
 

 
    var x = document.getElementById("firstInput").value; 
 
    console.log(x); 
 
    var y = document.getElementById("secondInput").value; 
 
    console.log(y); 
 
    if (cities[x] && cities[x][y]) { 
 
    console.log(cities[x][y]); 
 
    document.getElementById("output").innerHTML = "Output: " + cities[x][y]; 
 
    } else { 
 
    console.log("No flights from " + x + " to " + y); 
 
    } 
 
} 
 

 
var cities = { 
 
    "newyork": { 
 
    "newyork": 0, 
 
    "washington": 50, 
 
    "sacramento": 100, 
 
    "miami": 150 
 
    }, 
 
    "washington": { 
 
    "washington": 0, 
 
    "newyork": 50, 
 
    "sacramento": 100, 
 
    "miami": 150 
 
    } 
 
};

<form> 
 
    <select id="firstInput" onchange="calculatePrice()"> 
 
     <option value="newyork">newyork</option> 
 
     <option value="washington">washington</option> 
 
     <option value="sacramento">sacramento</option> 
 
     <option value="miami">miami</option> 
 
    </select> 
 
    <select id="secondInput" onchange="calculatePrice()"> 
 
     <option value="newyork">newyork</option> 
 
     <option value="washington">washington</option> 
 
     <option value="sacramento">sacramento</option> 
 
     <option value="miami">miami</option> 
 
    </select> 
 
</form> 
 
<div id="output">Output: 500</div>