javascript - 使用.filter()方法解析JavaScript多维对象

标签 javascript html

对于我的CS课程,我需要做一个“购物车”网站购买机票。在该网站上,您可以选择开始位置和结束位置,并向购物车中添加一张罚单。目前,我的可用航班是由多维对象定义的:

    <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>

现在,找到一个航班为两个地点连接一件事(即:底特律和多伦多)的工作很好。然而,我们需要能够把连接航班(例如:底特律到悉尼)放在一起,为了做到这一点,我在处理数据时遇到了问题,因为它实际上不是一个数组。任何帮助都将不胜感激,谢谢!
此外,以下是相关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>

编辑
请注意:我的问题与旅行推销员不同,因为我没有使用google地图或复杂的算法:我只是使用一个预先制作好的javascript对象。

最佳答案

我举了一个例子。目前,它最多只能使用两个连接航班。https://jsbin.com/pefoxujonu/edit?js,console

// Available flights
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}
];

// Set origin and destination
var from = 'Austin, TX';
var to = 'Sydney, AU';

// Determine route and price
var route = findRoute(from, to);
var price = priceRoute(route);
console.log(route, price);


function findRoute(from, to, direct) {
  // Prepare journey and connections
  var journey = [];
  var connections = [];

  // Iterate through flights
  flights.forEach(function (flight) {
    // Check if this is a direct flight
    if (flight.from === from && flight.to === to) {
      journey.push(flight);
    }
    // Otherwise check if this is a possible connecting flight
    else if (flight.from === from) {
      connections.push(flight);
    }
  });

  // Check if direct flight found
  if (journey.length || direct) return journey;

  // Iterate through possible connections to find connecting flight to destination
  connections.forEach(function (flight) {
    // Find route from connection destination to original destination
    var connection = findRoute(flight.to, to, true);

    // Check if connection found
    if (connection.length) journey = [].concat(flight, connection);
  });

  return journey;
}

function priceRoute(route) {
  return route.reduce(function (price, flight) {
    return price + flight.price;
  }, 0);
}

关于javascript - 使用.filter()方法解析JavaScript多维对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43750006/

相关文章:

javascript - Ajax 调用后刷新按钮样式 - 使用相同的 CSS 类

javascript - Tilemap 碰撞在 Phaser 中不起作用

javascript - 如何一个一个地加载php文件?

javascript - 如何计算哪个顶点最接近 3D 点?

javascript - 加载 ng-repeat 后查找表的特定元素

html - 屏幕元素被 map 挡住了?

html - 使用 CSS,即使在缩放视口(viewport)时,如何设置 div 标签的样式以填满 <body> 宽度?

javascript - Safari 和 Chrome 上的 Tinymce 换行问题

javascript - 如何在fabric.js中设置样式

javascript - 从 'jQuery Selectbox plugin 0.2' 选择框下拉列表中获取 val