Append an entire array except for a specified variable

Question

Thank you for checking my question.

I am trying to display the following array as an unordered list on the page:

var answers = ["cat", "dog", "horse", "hamster", "duck"]

However, if within this array there is this variable:

var x = $('#my-input').val()

I would want it to be removed from the displayed array. That is, if a user types in, for example, "duck" into the input, I don't want the "duck" to be among the array items displayed on the page. I hope I'm being clear.

Here is the js code I use to display the array onto the page:

$("#button").click(function(e){

    var answers = ["cat", "dog", "horse", "hamster", "duck"]
    var x = $('#my-input').val()

    if(jQuery.inArray(x, answers) !== -1) {
        $('#my-div').append(answers);
    }

});

As you can see I am struggling with two things:

1) appending the array as an unordered list of elements (I am looking for a better solution than manually typing in: $('#my-div').append("<ul> + <li> + answers[0] + </li> + </ul>") for all items.

2) removing one item from the array which is the value of the input.

Thanks again!

zavr · Accepted Answer · 2020-03-17T19:03:18.867

2

Filter the existing array:

const val = $('#my-input').val()
const newArray = answers.filter(a => a != val)

as for appending, your method is fine. you can use documentFragment as described here https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#Example

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

it has some advantages such as your dom will be updated at once hence the reflow will happen only 1 time.

but this is the same as what you're doing with append (see this answer)

edited Mar 17 '20 at 19:03

answered Mar 17 '20 at 18:57

zavr

2,049
2
18
28

Thank you for your answer! I am having some issues with appending the filtered array into the div, however. It still appends the array as a string and not a list. Where exactly should I put the ```documentFragment``` code to make it work? Right now it looks like this: ```if(jQuery.inArray(x, answers) !== -1) { var fragment = new DocumentFragment() filteredArray.forEach(function (answer) { var li = document.createElement('li') li.innerHTML = answer fragment.appendChild(li) }) $('#my-div').appendChild(fragment) } });``` – Krzysztof Delestowicz Mar 17 '20 at 19:09
1

don't worry about the fragment i didn't realise you use jquery, try `$('#my-div').append(answers.map(answer => $(\`
${answer}

zavr

Mar 17 '20 at 19:11

1

Works great! Thank you. The only correction I made to your code is changing ```answers.map``` to ```filteredArray.map``` as this is the array I want to show to the user. Other than that it is spot on. – Krzysztof Delestowicz Mar 17 '20 at 19:16

Would it be also possible to add ids to the displayed items? I tried using this code: ```filteredArray.forEach((item, i) => { item.id = i + 1; })``` but it doesn't assign ids to the array items. – Krzysztof Delestowicz Mar 17 '20 at 19:57

score 0 · Answer 2 · answered Mar 17 '20 at 18:57

0

JavaScript has a built-in filter function you can use to filter an array:

const filteredArray = answers.filter(value => value !== x);

answered Mar 17 '20 at 18:57

Ian

5,704
6
40
72

why === when you can use == – zavr Mar 17 '20 at 18:58
Always prefer `===` over `==` unless the situation at hand specifically calls for `==`. Otherwise you are far more likely to encounter odd edge cases you don't expect. – Ian Mar 17 '20 at 20:17

Append an entire array except for a specified variable

Thank you for checking my question.

2 Answers2