Javascript-对象数组唯一且适当的过滤

时间:2019-02-16 23:56:57

标签: javascript

我正在尝试为我作为组合项目创建的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问题,但找不到合适的答案。

有人可以指出我正确的方向

0 个答案:

没有答案