Javascript array from HTML attribute not executing function as expected

Question

I am trying to hide unwanted languages from a language selection menu. The relevant HTML code is as follows:

jQuery('.subnav-item').each(function() {
      var language = jQuery(this).innerHTML;
      var index = $('#customlanguagemenu').data('customlanguages');
      if (index.includes(language)) {
        jQuery(this).css({'display':'block','fontWeight':'bold','fontSize':'13px'});
      } else {
        jQuery(this).css('display', 'none');
        console.log(this + "This language was removed.");
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
    <a class="submenu-link" tabindex="-1" >English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1" >Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1" >Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1" >
    <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1" >Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

I can see that the code is executed, but ALL languages are disappearing, not just the ones selected in the data-customlanguages attribute.

What am I missing here?

I tried using .text() instead of innerHTML before, but it did not change the outcome. I also tried applying the display:none to the a elements instead of the li elements (since the innerHTML actually sits in the a elements) but the result still did not change.

You can change this line: var language = jQuery(this).innerHTML; for this: var language = jQuery(this).find('a').html(); Keep in mind you are iterating for each li element, so you have to enter to his child first (which is an 'a' tag), then you can get the inner html of that element. — PinguinoSod, Jun 07 '18 at 12:11

Takit Isy · Accepted Answer · 2018-06-07T14:33:22.210

If you want to use the JavaScript syntax with innerHTML or innerText, you need to use [0] just before to return only the match element (and not a collection).
In your case, you need to use innerText, because it won't find the whole element with its HTML in your array.

You can also use .find('a') and .text() if you want to use the jQuery syntax.

See this working snippet, where I only modified one line:

jQuery('.subnav-item').each(function() {
  var language = $(this).find('a').text(); // TAKIT: Modified only here
  var index = $('#customlanguagemenu').data('customlanguages');
  if (index.includes(language)) {
    jQuery(this).css({
      'display': 'block',
      'fontWeight': 'bold',
      'fontSize': '13px'
    });
  } else {
    jQuery(this).css('display', 'none');
    console.log(language, "language was removed."); // TAKIT: And a little here, but that's consoling…
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
  <a class="submenu-link" tabindex="-1">English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1">Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1">Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1">Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

⋅ ⋅ ⋅

In the following snippet, I made the following modifications:

Added some CSS to make the JS code way easier
Used .addClass if the condition is truthy

var customlanguages = $('#customlanguagemenu').data('customlanguages');
jQuery('.subnav-item').each(function(i, elm) {
  var language = $(elm).find('a').text();
  if (customlanguages.includes(language))
    $(elm).addClass('subnav-displayed');
});

.subnav-item {
  display: none;
  font-weight: bold;
  font-size: 13px;
}

.subnav-displayed {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li role="menuitem" class="subnav-item" tabindex="-1" data-selected>
  <a class="submenu-link" tabindex="-1">English</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Deutsch" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-8d27966a321@sessionmgr103&amp;vid=0&amp;theDb=de&amp;theContentType=de" class="submenu-link" tabindex="-1">Deutsch</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Espa&#241;ol" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=es&amp;theContentType=es" class="submenu-link" tabindex="-1">Espa&#241;ol</a>
</li>
<li role="menuitem" class="subnav-item" tabindex="-1">
  <a title="Ελληνικά" href="/eds/Toolbar/ChangeLanguage?sid=37f38cff-e78a-44ca-9522-98d27966a321@sessionmgr103&amp;vid=0&amp;theDb=el&amp;theContentType=el" class="submenu-link" tabindex="-1">Русский</a>
</li>

<script id="customlanguagemenu" type="text/javascript" src="javascript.js" data-customlanguages='["English","Русский"]'></script>

Hope it helps.

I tried this solution, but again all languages were removed. Not sure why. — Nimrod Yanai, Jun 07 '18 at 13:24
@NimrodYanai Do you have other elements siblings to your `a` in your `.subnav-item`s ? I've just updated with a `.find('a')`, just in case. Give it a try! — Takit Isy, Jun 07 '18 at 13:26
That worked! I just now noticed there is also a span there, so that's what caused the problem. Thank you! — Nimrod Yanai, Jun 07 '18 at 14:10

score 0 · Answer 2 · answered Jun 07 '18 at 12:01

0

I believe the problem is that the value in data-customlanguages is a String, NOT an array. If you need to store an array inside of an HTML element like that, you should instead use JSON.stringify and JSON.parse to save and get the data.

When you want to save the array, do something like:

$("#elem").data("customAttr") = JSON.stringify(varArray);

When you want to get the array:

let myArray = JSON.parse($("#elem").data("customAttr"));

answered Jun 07 '18 at 12:01

Brandon Dixon

1,036
9
16

I am not familiar with JSON. I just used the answer from here: https://stackoverflow.com/questions/16223786/store-and-retrieve-javascript-arrays-into-and-from-html5-data-attributes I also do not understand when I need to use the first line you wrote (I understand the second one goes into the javascript instead of the current line var index = $('#customlanguagemenu').data('customlanguages'); – Nimrod Yanai Jun 07 '18 at 12:05
JSON is a standard way of storing data in a String. The built-in javascript functions JSON.parse() and JSON.stringify() convert the string to the data / array, and vice verse. As for the first line, I suppose you would not use it if you are just hand-coding the array into the html element. The way you've coded it now is actually a valid JSON string. – Brandon Dixon Jun 07 '18 at 12:09
So just changing the line to let index = JSON.parse($("#customlanguagemenu").data("customlanguages")); should solve the issue? – Nimrod Yanai Jun 07 '18 at 12:36
I believe so, yes. – Brandon Dixon Jun 07 '18 at 12:46
Also, do follow the advice from the other answer, if it is still applicable: If you want to use innerHTML or innerText, you need to use [0] just before. – Brandon Dixon Jun 07 '18 at 12:46

Javascript array from HTML attribute not executing function as expected

2 Answers2