The easiest filter and array on js

Question

Good day!

Not exactly, apparently, explained his problem. Therefore, updating the question:

There are .answer-list-name links .answer-list-name , when clicked, all .thumbnail that do not contain this .answer-name become invisible. And when you click on the "All answers" - all become visible. The question is how to properly compare the values of the .answer-list-name and all available .answer-name . I hope, clearly explained. :)

 var answers = [{ "answer_name": "Ария Старк", "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }, { "answer_name": "Джейме Ланнистер", "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }]; for (var ans in answers) { var answerList = document.getElementById("answers-list"); var strongsTo = document.getElementById("strongs"); var newAnswerName = document.createElement('li'); newAnswerName.innerHTML = "<a class='answer-list-name'>" + answers[ans].answer_name + "</a>"; answerList.appendChild(newAnswerName); /*Сильные стороны*/ var newStrong = document.createElement('div'); newStrong.className = "answer col-xs-6 col-sm-4 col-lg-3"; newStrong.innerHTML = "<div href='#' class='thumbnail'> <h5 class='answer-name'>" + answers[ans].answer_name + "</h5><p class='answer-text'>" + answers[ans].strong + "</div>"; strongsTo.appendChild(newStrong); }

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <ul class="answers-list" id="answers-list"> <li class="active"><a class="answer-list-name" href="">Все ответы</a> </li> </ul> <div class="row answers" id="strongs"> </div>

I correctly understand you have a text field where you enter text, all <h1> in which this text is not hidden along with the underlying text, right?
In the end, do you want a solution for js without any additional libraries, or is there anyway for angularjs?
If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer).

Answer 1 · 2015-12-03T09:48:24

Option without using jQuery
1) to make the construction of the list of answers in a separate function, for example

 function createStrongs(strongs) { var strongsTo = document.getElementById("strongs"); strongsTo.innerHTML = strongs.map(function(answer) { return '<div class="answer col-xs-6 col-sm-4 col-lg-3">\ <div class="thumbnail">\ <h5 class="answer-name">' + answer.answer_name + '</h5>\ <p class="answer-text">' + answer.strong + '</p>\ </div>\ </div>' }).join(''); }

2) to make building the list of menu items into a separate function and, since the list does not change, you can immediately hang the handler by clicking on these elements, for example

 function createMenu(links) { var answerList = document.getElementById("answers-list"); answerList.innerHTML += links.map(function(link) { return '<li>\ <a class="answer-list-name">' + link.answer_name + '</a>\ </li>' }).join(''); //выбираем все элементы с классом .answer-list-name [].forEach.call(document.querySelectorAll('.answer-list-name'), function(menuItem) {//бежим по всем menuItem.addEventListener('click', function() {//добавляем обработчик для клика var selected = this.innerHTML;//проверяем что кликнули if (selected == "Все ответы") //если все createStrongs(answers);//показываем все else//иначе createStrongs(answers.filter(function(ans) {//фильтруем исходный массив return ans.answer_name == selected; })); }); }); }

 var answers = [{ "answer_name": "Ария Старк", "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }, { "answer_name": "Джейме Ланнистер", "strong": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }]; function createStrongs(strongs) { var strongsTo = document.getElementById("strongs"); strongsTo.innerHTML = strongs.map(function(answer) { return '<div class="answer col-xs-6 col-sm-4 col-lg-3">\ <div class="thumbnail">\ <h5 class="answer-name">' + answer.answer_name + '</h5>\ <p class="answer-text">' + answer.strong + '</p>\ </div>\ </div>' }).join(''); } function createMenu(links){ var answerList = document.getElementById("answers-list"); answerList.innerHTML += links.map(function(link){ return '<li>\ <a class="answer-list-name">'+link.answer_name+'</a>\ </li>' }).join(''); [].slice.call(document.querySelectorAll('.answer-list-name')).forEach(function(menuItem){ menuItem.addEventListener('click',function(){ var selected = this.innerHTML; if(selected == "Все ответы") createStrongs(answers); else createStrongs(answers.filter(function(ans){ return ans.answer_name == selected; })) }); }); } createMenu(answers); createStrongs(answers)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <ul class="answers-list" id="answers-list"> <li class="active"><a class="answer-list-name" href="#">Все ответы</a> </li> </ul> <div class="row answers" id="strongs"> </div>

Aleksander K. Aleksander K. 2,069 6 20 · Answer 2 · 2015-12-02T09:53:03

If the question is how to filter an array of objects, then:

 var db = [{h : 'Заголовок', t : 'Текст'}, {h : 'Заголовок', t : 'Текст'}]; function filter(str) { return db.filter(function(el) { return el.h.indexOf(str) !== -1; }); }

If the filter on the html page:

 function filter(str) { var headers = document.querySelectorAll('h1'); Array.prototype.forEach.call(headers, function(el) { if (el.innerText.toLowerCase().indexOf(str.toLowerCase()) !== -1) { el.classList.remove('hidden'); } else { el.classList.add('hidden'); } }); } var inp = document.querySelector('#filterInp'); inp.addEventListener('keyup', function() { filter(inp.value); });

 .hidden { display: none; } .hidden+p { display: none; }

 <input type="text" id="filterInp" /> <h1>First header</h1> <p>Text 1, text 1, text 1, text 1.</p> <h1>Second header</h1> <p>Text 2, text 2, text 2, text 2.</p> <h1>Third header</h1> <p>Text 3, text 3, text 3, text 3.</p>

@Grundy Well, I perceive the connection of Angular as a more difficult method for this task.
Not in the amount of your code, but in the amount of code unnecessary for this task from libraries.
Especially if you look at the labels and the question, then there is implied a requirement not to use additional libraries.

Streletz 7.391 eight 18 34 · Answer 3 · 2015-12-02T10:07:40

Perhaps I did not fully understand what the expected result is, but I know AngularJS can tell you one interesting construction:

Print everything in an array: We have an array:

 var list = [ { code: 1, name: 'list-item-1' }, { code: 2, name: 'list-item-2' } ];

We derive its values:

 <input ng-model="query" /> <ul> <li ng-repeat="item in filteredList = (list | filter: query)" id={{item.id}}>{{item}}</li> </ul>

input will filter the entire list.

The rest is a matter of technology. Have it entered that in filteredList you will have a filtered array, and in the list you will have the original array.

I meant - you have an input field, <input ng-model = "query" /> and the topic starter wanted it to be a list of links that you can click on

The easiest filter and array on js

3 answers 3

More articles: