在輸入中使用JSON JavaScript

Question

我試圖製作一個簡單的應用程序，我有以下想法。我有兩個輸入字段，用戶可以在其中選擇城市，我也有我想要獲得結果的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.正如你所看到的，我想從JS中的JSON或對象中加載數據。

這是我的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; 

} 

但是使用這個代碼中，我得到以下錯誤：
Uncaught TypeError: Cannot read property 'y' of undefined
這是令人困惑，因爲當我CONSOLE.LOG（Y），它似乎是工作的罰款。
任何人都可以幫助我嗎？ 這裏是JSBin所以你可以有一個更美好的期待： https://jsbin.com/laluzawuda/edit?html,js,console,output

Answer 1

cities.x.y應該是cities[x][y]。 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>