/    Sign up×
Community /Pin to ProfileBookmark

Why using Array when filtering a table?

Copy linkTweet thisAlerts:
Mar 22.2021

I am trying to create a script that filter a table. Searching for a solution I have found two main solutions.

**Without array**

  • 1. Loop for every keyup and add classes to each row
    live: http://94.237.92.101:6060/posts
    http://jsfiddle.net/veuj3agr/11/

    • **With array**

  • 1. Loop the table and create an array

  • 2. Loop the array for every keyup

  • 3. Loop this result and add the result
    https://jsfiddle.net/s3Lfkjwz/1/

    • My questions are:

  • 1. What is the benefit of the array? Speed?

  • 2. What is the benefit for an addEventListener compared to `onkeyup(function)`?

    • to post a comment
    JavaScript

    7 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @rpg2009Mar 22.2021 — I'm at work at the moment, so would need to have a better look at this.

    Off the bat the second is an old script, using **vars** and **getElementsByClassName**.

    Due to getElementsByClassName returning a live HTMLCollection the script is using Array.prototype.forEach.call to loop through it — A similar technique was to use Array.prototype.slice.call(HTMLCollection).forEach(do something)

    **querySelectorAll** returns a _nodeList_ which has a forEach method of it's own.

    e.g. document.querySelectorAll('className').forEach(do something)

    So on the surface I would probably be looking for an alternative to the second script.

    As I say would need a better look later.

    In the meantime maybe someone else has the time here : )
    Copy linkTweet thisAlerts:
    @sibertauthorMar 22.2021 — > @rpg2009#1629520 So on the surface I would probably be looking for an alternative to the second script.

    So. Using array is better? Why?
    Copy linkTweet thisAlerts:
    @rpg2009Mar 22.2021 — > @sibert#1629522 So. Using array is better? Why?

    Where did I say that?
    Copy linkTweet thisAlerts:
    @sibertauthorMar 22.2021 — > @rpg2009#1629524 Where did I say that?

    As you only mentioned option 2 :-)
    Copy linkTweet thisAlerts:
    @rpg2009Mar 22.2021 — To be clear in the second example we are not using an array. We are [calling](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) forEach on the htmlcollection, which is an array-like object. It's almost like tricking it into believing it's working on a real array.

    To illustrate
    ``javascript<i>
    </i>// not an array
    // has no array methods forEach, map, filter etc.
    const arrayLikeObject = {
    0 : 'apples',
    1 : 'pears',
    2 : 'bananas',
    length: 3
    }

    // Like out htmlcollection this approach fails.
    // Uncaught TypeError: arrayLikeObject.forEach is not a function
    console.log(arrayLikeObject.forEach((fruit) =&gt; console.log(fruit)))

    // This time using call to bind our arrayLikeObject to forEach's 'this' property
    console.log(
    Array.prototype.forEach.call(arrayLikeObject, (fruit) =&gt; console.log(fruit))
    )
    // apples, pears, bananas<i>
    </i>    `</CODE>
    Again I am just having a scan, it's been a long day, but look at the following from the second example
    <CODE lang="javascript">    `javascript<i>
    </i>function onInputEvent(e) {
    input = e.target;
    var table1 = document.getElementsByClassName(input.getAttribute('data-table'));
    Arr.forEach.call(table1, function(table) {
    Arr.forEach.call(table.tBodies, function(tbody) {
    Arr.forEach.call(tbody.rows, filter);
    });
    });
    }<i>
    </i>    ``
    We have a loop with two nested loops. A loop, with a loop inside of that, with a loop inside of that. That is far from efficient.

    Your first example has one loop. The function is 6 lines long and looking at the jsfiddle does the trick. I accept I am possibly missing details, but without digging deeper that is the one I would opt for.
    Copy linkTweet thisAlerts:
    @rpg2009Mar 22.2021 — > @sibert#1629526 As you only mentioned option 2 :-)

    So on the surface I would probably be looking for an **_alternative_** to the second script. :)
    Copy linkTweet thisAlerts:
    @sibertauthorMar 22.2021 — > @rpg2009#1629528 So on the surface I would probably be looking for an alternative to the second script.

    I am curious... Why not the first?

    > Your first example has one loop. The function is 6 lines long and looking at the jsfiddle does the trick. I accept I am possibly missing details, but without digging deeper that is the one I would opt for.

    Sorry I did not see this answer. But I guess that this is sort of an answer to my question...
    ×

    Success!

    Help @sibert spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 4.25,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...