Check if array string item includes substring stored in a variable

JavaScript
1

So I have three buttons, each with an ID. If clicked, it would display its corresponding data which is in an array of string.

Here’s a general idea of how I think I can achieve it. (I am in the earliest stage of Javascript.)

  1. ID name must be a substring of its corresponding data.
  2. Get the ID of the clicked button and store it in another variable.
  3. Check which of the array items includes the ID name (through the variable) using loop.
  4. Once found, display data in that array index.

The problem is, I can’t figure out how to check if the array items have a substring STORED IN A VARIABLE.
All I found online was that they include the substring in the includes() function itself.

Is it possible to use a variable? How?
Is there a better approach?

Here’s my code.
Thank you.

codes

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <p id="demo"></p>
    <a class="btn" href="#" id="john">John</a>
    <a class="btn" href="#" id="jake">Jake</a>
    <a class="btn" href="#" id="taylor">Taylor</a>
    <script>
        $('.btn').on('click', function () {
            var name = new Array(
                "John Name",
                "Jake Name",
                "Taylor Name"
            );
            var id = $(this).attr('id');
            var i;
            var n;
            for (i = 0; i < name.length; i++) { 
                n = name[i].includes("id");
                 if (n == true) {
                    document.getElementById("demo").innerHTML = name[i];
                    break;
                }
                else {
                    //do nothing
                }
            }
        });
    </script>
</body>
</html>
2

.includes(some_variable) ?

personally, I’d rather use Array.map() than for (…), makes it easier to read.

3

Hi, @Dormilich.

.includes(some_variable) doesn’t work.

I’ll look into Array.map() once this is fixed. Thank you.

4

if you don’t define some_variable somewhere, then it obviously can’t work.

5

I think I defined it.

var id = $(this).attr(‘id’);

Or do I need to define another one?

6

You defined the variable named id, and I used the variable named some_variable …

7

Yeah.

I tried removing the “” inside the .includes() and put the variable name but still doesn’t work. It displays nothing when I click the button.

8

.includes() compares case-sensitively.

1 Like
9

Oh! That is the problem.
Capitalized the first character of the ID’s and it worked just fine.

Thank you so much.

10

And now an example how short it can be with array.filter() (… mixed that up with map(), which is equally important):

// pass the data into the handler
$('.btn').on('click', ["John Name", "Jake Name", "Taylor Name"], function (evt) {
    // filter by string match and take the first match
    var name = evt.data.filter(str => str.includes(this.id))[0]
    // if there is no match, `name` will be undefined,
    // which causes `.text()` to behave as getter
    // if you want a reset, pass an empty string as replacement
    $("#demo").text(name)
})
11

If IE support isn’t an issue, you could also use Array.prototype.find which returns the value of the first element in the array that satisfies the provided testing function.

const names = ["John Name", "Jake Name", "Taylor Name", "John Name"];

$('.btn').on('click', function() {
  const name = names.find(name => name.includes(this.id));
  document.getElementById("demo").innerHTML = name;
});
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.