Using JSON with inputs JavaScript

Question

I'm trying to make simple app and I have the following idea. I have two input fields in which user can choose city and I also have JSON from which I want to get results. Now what I want is that the depending on which cities user chooses he gets different result. This is my Object(JSON):

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

This is my 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>

Example of the thing I want to achieve: User chooses New York in first input and Sacramento in second. Output changes to 50. As you can see I want to load data from my JSON or object in JS.

This is my 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;

}

But using this code I get the following error:
Uncaught TypeError: Cannot read property 'y' of undefined
This is confusing because when I console.log(y) it seems to be working fine.
Can anyone help me with this ? Here is JSBin so you can have a better look: https://jsbin.com/laluzawuda/edit?html,js,console,output

It should be `variable.cities[firstcity][secondcity]`, where `variable` is the variable that contains the object, `firstcity` is the value from the first menu, and `secondcity` is the value from the second menu. — Barmar, May 25 '17 at 21:54
@Barmar I'm not asking for a solution. I'm asking can this be achieved the way I imaged it? Also any example of similar problem would be helpful. Anyway I have already made some attempts I will update my question with them as soon as possible. — Zvezdas1989, May 25 '17 at 22:13
The way you wrote the question, you were asking for code, not asking for help fixing your code. — Barmar, May 25 '17 at 22:18
@Barmar I can see that it may have looked liked that. I just wanted to be as precise as possible with my question and I guess it backfired. Anyway I've updated my question hope it's better now. — Zvezdas1989, May 25 '17 at 22:29
You still haven't posted your attempt to solve the problem. I even gave you a very huge hint of how to go about it. — Barmar, May 25 '17 at 22:39
@Barmar I'm currently trying to make it work with your hint. Will update as soon as I get it. — Zvezdas1989, May 25 '17 at 22:52
@Barmar I have been trying to solve it all night using your tip, but still didn't achive it. I've updated my question so you have a closer look. — Zvezdas1989, May 26 '17 at 08:52

score 2 · Accepted Answer · answered May 26 '17 at 15:51

cities.x.y should be cities[x][y]. cities.x.y looks for a property named x in cities, it doesn't use the value of the variable as the property name. See 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>

Thank you for your help. I think at some point I have tried using cities[x][y], but I was still getting undefined error, must have had some other mistake, anyways big thanks. — Zvezdas1989, May 27 '17 at 09:12

Using JSON with inputs JavaScript

1 Answers1