parsing JavaScript multidimensional object using .filter() method

Question

For my CS class, I am required to make a "shopping cart" website for buying airline tickets. On this website, you can select a start location and an end location and add a ticket to your shopping cart. Currently, my available flights are defined by a multidimensional object:

    <script language="JavaScript">

        var flights = [
            {from: "Toronto, ON", to: "Detroit, MI", price: "250"},
            {from: "Toronto, ON", to: "Los Angeles, CA", price: "300"},
            {from: "Detroit, MI", to: "Toronto, ON", price: "250"},
            {from: "Detroit, MI", to: "Austin, TX", price: "350"},
            {from: "Detroit, MI", to: "Los Angeles, CA", price: "400"},
            {from: "Austin, TX", to: "Los Angeles, CA", price: "275"},
            {from: "Austin, TX", to: "Detroit, MI", price: "350"},
            {from: "Los Angeles, CA", to: "Austin, TX", price: "275"},
            {from: "Los Angeles, CA", to: "Detroit, MI", price: "400"},
            {from: "Los Angeles, CA", to: "Toronto, ON", price: "300"},
            {from: "Los Angeles, CA", to: "Sydney, AU", price: "1000"},
            {from: "Sydney, AU", to: "Los Angeles, CA", price: "1000"}
        ];


        function findFlights() {
            var total = 0;
            var toString = document.getElementById("to");
            var fromString = document.getElementById("from");
            var to = toString.value;
            var from = fromString.value;
            flights.filter(function (flights) {
                if (flights.from === from && flights.to === to) {
                    var current = parseInt(flights.price);
                    total = total + current;
                    console.log(total);
                    console.log("From " + from);
                    console.log("To " + to);
                    document.getElementById("hi").innerHTML = "blep";
                    return flights;
                }
//                else if (flights.from === from && flights.to != to) {
//                    var to = to;
//                    var newFrom = flights.to;
//                    console.log(findOne(newFrom, to));

//                    if(flights.from === newFrom && flights.to === to) {
//                        console.log(from);
//                        console.log(newFrom);
//                        console.log(to);
//                        console.log(flights);
//                    }
//                }
            });

        }

        function findOne(from, to) {
            var toString = to;
            var fromString = from;
            var to = toString.value;
            var from = fromString.value;
            flights.filter(function (flights) {
                if (flights.from === from && flights.to === to) {
                    var current = parseInt(flights.price);
                    total = total + current;
                    console.log(total);
                    console.log("From " + from);
                    console.log("To " + to);
                    return flights;
                }
            });

        }

    </script>

Right now, finding a flight for two locations connected by one thing (IE: Detroit and Toronto) works fine. However, we need to be able to put together connecting flights (IE: Detroit to Sydney), and I am having issues manipulating the data in order to do this, because it's not actually an array. Any help would be appreciated, thank you!

Also, here is a copy of the relevant HTML:

<div id="contact-form">
    <div>
        <h1>Welcome to the Flight Reservation System!</h1>
        <h4>Please fill out the form in order to reserve your flight</h4>
    </div>
    <p id="failure">Nope</p>
    <p id="success">Your message was sent successfully. Thank you!</p>


    <form action="">
        <div>
            <label for="dateDept">
                <span class="required">Departure Date</span>
                <input id="dateDept" name="dateDept" type="date" required="required" tabindex="1"
                       autofocus="autofocus"/>
            </label>
        </div>
        <div>
            <label for="dateArr">
                <span class="required">Arrival Date</span>
                <input id="dateArr" name="dateDept" type="date" required="required" tabindex="1" autofocus="autofocus"/>
            </label>
        </div>
        <div>
            <label for="from">
                <span>Subject: </span>
                <select id="from" name="from" tabindex="4">
                    <option value="Toronto, ON">Toronto</option>
                    <option value="Detroit, MI">Detroit</option>
                    <option value="Austin, TX">Austin</option>
                    <option value="Los Angeles, CA">LA</option>
                    <option value="Sydney, AU">Sydney</option>
                </select>
            </label>
        </div>
        <div>
            <label for="to">
                <span>Subject: </span>
                <select id="to" name="to" tabindex="4">
                    <option value="Toronto, ON">Toronto</option>
                    <option value="Detroit, MI">Detroit</option>
                    <option value="Austin, TX">Austin</option>
                    <option value="Los Angeles, CA">LA</option>
                    <option value="Sydney, AU">Sydney</option>
                </select>
            </label>
        </div>
        <div>
            <button type="submit" name="Add Flight" onClick="findFlights()">Purchase Flight</button>
            <input type="button" name="Add Flight" onClick="findFlights()"></input>
        </div>
    </form>

</div>

EDIT Please note: My problem is not similar to the traveling salesman, because I am not using google maps or complicated algorithms: I am simply using a pre-made Javascript object.