我正在尝试为我作为组合项目创建的Cinema App过滤JSON对象,但是遇到了困难。 我设法获得了唯一的JSON对象,但是我无法获得带有条件的唯一对象,条件是- 仅返回包含所选电影的日期的JSON对象。 目前,所有日期都具有特色,甚至还有其他不相关的电影。
HTML View to understand the structure
过滤前
[{"ShowtimeId":"1","Date":"2019-02-13","Time":"14:00:00","MovieId":"1","Title":"Black Panther","Genre":"Superhero","Duration":"100","Rating":"5","Description":"Movies","Actors":""},{"ShowtimeId":"2","Date":"2019-02-13","Time":"15:29:35","MovieId":"1","Title":"Black Panther","Genre":"Superhero","Duration":"100","Rating":"5","Description":"Movies","Actors":""},{"ShowtimeId":"3","Date":"2019-02-20","Time":"14:11:29","MovieId":"2","Title":"Antman","Genre":"Superhero","Duration":"120","Rating":"5","Description":"Decent","Actors":"Brad Pitt"}]
过滤后 我的JSON数组如下所示(unqiueDate):
`[{"ShowtimeId":"1","Date":"2019-02-13","Time":"14:00:00","MovieId":"1","Title":"Black Panther","Genre":"Superhero","Duration":"100","Rating":"5","Description":"Movies","Actors":""},{"ShowtimeId":"3","Date":"2019-02-20","Time":"14:11:29","MovieId":"2","Title":"Antman","Genre":"Superhero","Duration":"120","Rating":"5","Description":"Decent","Actors":"Brad Pitt"}]`
我已经尝试过过滤技术,但是由于功能未按预期运行,因此每次出现未定义的变量时,我都会进行过滤。
方法1: 创建搜索功能以搜索数组并返回过滤后的数组,然后尝试填充输入
`
relevantDate = search(MovieTitle,
for(var i=0;i<uniqueDate.length;++i){
//Unique Dates and Relevant Dates
document.getElementById('Date').innerHTML += '<option value='+i+'>'+relevantDate[i].Date+'</option>';
}
//Loop Over Array
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].name === nameKey) {
return myArray[i];
}
}`
方法2:
使用.find()方法过滤数组
`relevantDate = search(MovieTitle,
for(var i=0;i<uniqueDate.length;++i){
//Unique Dates and Relevant Dates
document.getElementById('Date').innerHTML += '<option value='+i+'>'+relevantDate[i].Date+'</option>';`
`relevantDate = arr.find(o => o.name === MovieTitle);`
HTML-
`div class="col-sm-3 col-xs-12 fast-drop">
<select class="form-control" name="Select Film" id="Title" onchange="FastSearch()">
<option selected disabled>Select Film</option>
<!-- <option>Mary Poppins</option> -->
</select>
</div>`
` <div class="col-sm-3 col-xs-12 fast-drop">
<select class="form-control" name="Select Date" id="Date" onchange="FastSearch()" disabled>
<option selected disabled>Select Date</option>
<!-- <option>21/01</option> -->
</select>
</div>
`
Javascript-
`var arr = new Array();
var Title = "";
var MovieTitle = "";
var checked = 0; //Determines which DOM elements have been selected
let uniqueDate = {};
let relevantDate = {};`
`$.ajax(
{
url: '../Controller/Movies.php',
datatype: 'JSON',
success: function (data) {
var Title = data.Title;
arr = JSON.parse(data);
let unique = arr.filter((set => f => !set.has(f.Title) && set.add(f.Title))(new Set));
for(var i=0;i<unique.length;++i){
//New Options for Showtime movies
document.getElementById('Title').innerHTML += '<option value='+i+'>'+unique[i].Title+'</option>';
//document.getElementById('Date').innerHTML += '<option value='+i+'>'+arr[i].Date+'</option>';
//document.getElementById('Time').innerHTML += '<option value='+i+'>'+arr[i].Time+'</option>';
}
console.table(arr);
}
});`
`function FastSearch()
{
MovieTitle = $("#Title :selected").text();`
`switch(checked)
{
case 0: //When Movie is selected, Add 1 and activate the date field
//if title selected
if(MovieTitle.length >= 1)
{
$('#Date').removeAttr('disabled');
uniqueDate = arr.filter((set => f => !set.has(f.Date) && set.add(f.Date))(new Set));
relevantDate = search(MovieTitle,uniqueDate);
for(var i=0;i<uniqueDate.length;++i){
//Unique Dates and Relevant Dates
document.getElementById('Date').innerHTML += '<option value='+i+'>'+relevantDate[i].Date+'</option>';
}
checked++;
}
else{
$('#Date').attr('disabled', 'disabled');
$('#Time').attr('disabled', 'disabled');
}
break;
case 1:
//alert('test');
}
}`
`//Loop Over Array
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].name === nameKey) {
return myArray[i];
}
}`
我希望以relevantDate
的形式返回的数组是一个只有唯一过滤值的JSON对象。
我查看了其他stackoverflow问题,但找不到合适的答案。
有人可以指出我正确的方向