【发布时间】: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