Фильтрация массива js с подчеркиванием. js - PullRequest
Новая
       9

Фильтрация массива js с подчеркиванием. js

0 голосов
/ 11 января 2020

Я новичок в Java Script и совсем не в передний конец. У меня проблема с отображением отфильтрованного массива в шаблоне html. То, что у меня есть: 

 <form>
    <div class="form-group">
        <input v-model="stitle" type="text" id=inputTitle/>
    </div>
    <div class="form-group">
      <input v-model="scast" type="text" id="inputCast"/>
    </div>
    <div class="form-group row">
        <input @click="messageFiltering" type="button" class="btn btn-info col-sm-12" value="Szukaj"/>
    </div>
  </form>

  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Production Year</th>
        <th>Cast</th>
        <th>Genres</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="movie in messageFiltering">
            <td>{{movie.title}}</td>
            <td>{{movie.year}}</td>
            <td>{{movie.cast.toString()}}</td>
            <td>{{movie.genres.toString()}}</td>
      </tr>
    </tbody>
  </table>

И мой сценарий: 

  <script type="module">
var app = new Vue({
  el: '#app',
  data: {
    stitle: '',
    syearfrom: '',
    syearto: '',
    scast: '',
    movies: [
      {"title":"Chained for Life","year":1951,"cast":["Hilton Twins"],"genres":[]},
      {"title":"Cheese Chasers","year":1951,"cast":["Looney Tunes"],"genres":["Animated"]},
      {"title":"Chicago Calling","year":1951,"cast":["Dan Duryea","Mary Anderson"],"genres":["Noir"]},
      {"title":"China Corsair","year":1951,"cast":["Jon Hall","Ernest Borgnine"],"genres":["Adventure"]},
      {"title":"So This Is Paris","year":1955,"cast":["Tony Curtis","Gloria DeHaven"],"genres":["Musical"]},
      {"title":"Soldier of Fortune","year":1955,"cast":["Clark Gable","Susan Hayward"],"genres":["Drama"]},
      {"title":"Son of Sinbad","year":1955,"cast":["Dale Robertson","Sally Forrest","Vincent Price"],"genres":["Adventure"]},
      {"title":"Southbound Duckling","year":1955,"cast":["Tom and Jerry"],"genres":["Animated"]},
      {"title":"Special Delivery","year":1955,"cast":["Joseph Cotten","Eva Bartok"],"genres":["Comedy"]}
      ],
  },

    methods: {
        messageFiltering() {
            let collection = _.filter(movies, function (element) {
                return element.year.toString().toLowerCase().indexOf(this.syearfrom.toString().toLowerCase()) != -1;
            });

            collection = _.filter(collection, function (element) {
                return element.title.toString().toLowerCase().indexOf(this.stitle.toString().toLowerCase()) != -1;
            });

            collection = _.filter(collection, function (element) {
                return element.cast.toString().toLowerCase().indexOf(this.scast.toLowerCase().toLowerCase()) != -1;
            });
            return collection;
        }
    }
})

Я хотел бы отобразить массив фильмов, отфильтрованных с помощью messageFiltering () по пользовательскому вводу из формы в моей таблице, но я не знаю, как его подключить. Кнопка @click событие в порядке?

1 Ответ

0 голосов
/ 11 января 2020

Я не уверен, что вы хотите выполнить sh, просто сначала сократите код. Во-вторых, вам не нужен loda sh для этого фильтра basi c, вы можете использовать фильтр по умолчанию filter для выполнения этой задачи. Также, кажется, есть несколько toLowerCase () вместо toString (). ToLowerCase () 

collection = _.filter(collection, function (element) {
                return element.cast.toString().toLowerCase().indexOf(this.scast.toString().toLowerCase()) != -1;
            });
            return collection;

Может быть, это поможет вам, если нет, то отредактируйте вопрос, чтобы мы могли лучше понять, чего вы хотите достичь sh, а не этот избыточный код.

Просто рефакторинг метода кода 

messageFiltering() {
            return movies.filter(movies, function (element) {
                return element.year.toString().toLowerCase().indexOf(this.syearfrom.toString().toLowerCase()) != -1 && element.title.toString().toLowerCase().indexOf(this.stitle.toString().toLowerCase()) != -1 && element.cast.toString().toLowerCase().indexOf(this.scast.toStringe().toLowerCase()) != -1;
            });
        }

Редактировать: Попробуйте обновить эту строку 

<input v-on:click="messageFiltering" type="button" class="btn btn-info col-sm-12" value="Szukaj"/>

Ссылка

...