Converting a javascript array to HTML list when the array is a variable (causing type error)

Question

I want my javascript function to convert an array from my HTML document into an HTML list in a separate document. However, I am encountering problems with this and think it might be because the array isn't being recognised.

My HTML document is a digital edition in which each word is enclosed in an <a> element, which has attributes. One of these attributes (@abbr) has been compiled by my XSLT transformation to resemble a javascript array; i.e.

<a id="123" onclick="myFunction(this.id)" abbr="['x', 'y', 'z']">word</a>

As part of my javascript function (triggered by clicking on the word), I want to present x, y, and z as rows in an unordered list. This is what I have at the moment:

    function myFunction(id) {
var el = document.getElementById(id);
var abbrArray = el.getAttribute('abbr');
var abbrList = '<ul></ul>';
var abbrListItems = abbrArray.join('</li><li>');
var abbrListFull = abbrList.innerHTML = '<li>' + abbrListItems + '</li>';
}

This is what the abbrListFull variable should stand for:

<ul>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>

The function goes on to create a table and place the abbrListFull variable as the inner HTML of one of the cells.

However, the function fails because of "Uncaught TypeError: abbrArray.join is not a function". Can anyone explain what is causing this problem and how to fix it?

I realise that this error is sometimes due to a function being performed on the wrong type of object. Alerting abbrArray produces "['x', 'y', 'z']", which looks like an array, but I am wondering if there is something else I need to do to make this recognizable as an array within the function.

Thanks!

Nick · Accepted Answer · 2018-04-22 23:19:07Z

1

getAttribute returns a string, which in your case happens to look like an array. For the particular example you have given, you could use the .match method of strings to convert to an array e.g.

abbrArray = el.getAttribute('abbr').match(/(\w+)/g);

This will convert a string that looks like

"['abbr1', 'abbr2', 'abbr3']"

into

Array [ "abbr1", "abbr2", "abbr3" ]

which you will then be able to do a join on.

answered Apr 22, 2018 at 23:19

Nick

147k23 gold badges67 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eystein Thanisch Over a year ago

Thanks! That works nicely. And it is interesting to know that what resembles an array is not necessarily an array...

Nick Over a year ago

Glad to be able to help.

Eystein Thanisch · Accepted Answer · 2018-04-23 12:04:45Z

0

This isn't a problem with Nick's answer, in terms of the original question.

However, the data compiled under @abbr (i.e. x, y, and z), in my case, were actually URLs. I didn't mention this, as it didn't seem to be relevant, but it actually was. Using the accepted solution above on the URLs split them into an array at each "." and "/". To achieve the desired outcome (an array of URLs), I used the following:

abbrArray = el.getAttribute('abbr').split(" ");

after changing my XSLT transformation so that the @abbr attribute contained simply "x y z".

answered Apr 23, 2018 at 12:04

Eystein Thanisch

571 silver badge9 bronze badges

Collectives™ on Stack Overflow

Converting a javascript array to HTML list when the array is a variable (causing type error)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related