【问题标题】:I am trying to find times in an array of objects using the value of my input field我正在尝试使用输入字段的值在对象数组中查找时间
【发布时间】:2018-06-26 22:29:46
【问题描述】:

我会尽力解释这一点。我有一个输入字段,允许用户输入某个时间。我也有许多与他们共度时光的景点。一旦用户输入一个时间并单击一个按钮,该时间的所有arrtactions都应该加载到dom。事件监听器正在工作,但每个景点都在打印,即使是没有时间的景点。以下是我到目前为止所拥有的。我相信我只是遗漏了一些小细节。

<input id="timeInput" type="text" placeholder="Ex: 1:00 PM">
    <button id="timeBtn">Show me Scheduled Events!</button>



let timeTest = [];
let timesArray = [];
let timeSearch = document.getElementById("timeInput");
$('#timeBtn').on('click',((e) => {
timeTest.push(timeSearch.value);
let timeSplit = timeTest[1].split(":");
let hourSelected = timeSplit[0];
let morningOrEvening = timeSplit[1];
controller.getType()
.then((data) => {
    for(let i = 0; i < data.length; i++) { 
        if (data[i].times !== undefined) {
            if (timeValueCheck(data[i].times)) {
                timesArray.push(data[i]);
            }
        else {
            timesArray.push(data[i]);
        }
    }}
    timesArray.forEach(attraction =>{
        $('#output').append(attrHBS(attraction));
        console.log(attraction);
        }
     );
    }
);
}));


let timeValueCheck= (timesArray) => {
    let timeSplit = timeTest[1].split(":");
    let hourSelected = timeSplit[0];
    let morningOrEvening = timeSplit[1];
    for (let i=0; i < timesArray.length; i++) {
        let splitArray = timesArray[i].split(":");
        console.log("super", splitArray);
        if (hourSelected === splitArray[0]){
            console.log("mega",hourSelected, splitArray[0]);
            return true;
        }
    }

    return false;
};


// this is what is inside controller.js

module.exports.getType = (attrData) => {
//creating new Promise to load when used in other functions
return new Promise((resolve, reject) => {
//getting our data from two ajax calls, attractions and attraction types
let p1 = factory.getAttractionData();
let p2 = factory.getAttTypes();
// empty array to push data into once we have manipulated it
let newDataWithTypes = [];
//promise all to get both data types before using them.
    Promise.all([p1,p2])
    .then((attrData) => { 
        // loop over the first array, all 132 attractions
        attrData[0].forEach(allAttractions => {
            // loop over second array, the 8 types
            attrData[1].forEach(typeofAttractions => {
                // if statement to add the types to each attraction based on their type id!
                    if (allAttractions.type_id === typeofAttractions.id) {
                        allAttractions.type = typeofAttractions.name;
                        // pushes to the array on 32
                        newDataWithTypes.push(allAttractions); 
                    }
                });
            });
            resolve(newDataWithTypes);
        }
    );
});
};

【问题讨论】:

  • 什么是controller
  • 我正在使用 browserify 和 grunt,所以我设置了一堆模块。 controller.getType() 来自我的控制器模块,该模块正在对具有我的 JSON 数据的 firebase 进行 ajax 调用
  • 您可能想看看是否可以输入足够的代码来使其成为minimal reproducible example。因为controller 未定义,任何试图回答这个问题的人都可能很难复制问题或测试他们的答案
  • 如果你想看,我可以给控制器代码。
  • 你没有抓住重点。您的问题没有真正的答案,因为没有人(除了您)可以按原样运行代码。

标签: javascript jquery arrays ajax dom


【解决方案1】:

javascript中数组的索引以0开头。我认为这是问题所在。 试试这个

let timeSplit = timeTest[0].split(":");...

而不是

let timeSplit = timeTest[1].split(":");...

【讨论】:

  • 这并没有改变任何东西。如果我在不输入时间的情况下单击按钮,我会得到所有 27 个在我的控制台中只有时间的。如果我添加时间,我会得到全部或 53
【解决方案2】:

这行不应该是'0'吗:

let timeSplit = timeTest[0].split(":")

【讨论】:

  • 这并没有改变任何东西。如果我在不输入时间的情况下单击按钮,我会得到所有 27 个在我的控制台中只有时间的。如果我添加时间,我将得到全部或 53。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-04-22
  • 2021-12-19
  • 1970-01-01
  • 2021-01-03
  • 2020-02-04
  • 2021-02-21
相关资源
最近更新 更多