0

I looked at this thread but it didn't help: Find an element in DOM based on an attribute value

I need a Vanilla JS solution to select a username that is in a custom attribute of an <a> tag in the DOM. I used const users = document.querySelectorAll('a[metadata]') which returns a NodeList of all the <a> tags with all their attributes. If I type console.log(users[0]), I get:

<a href="#" class="btn-normal" metadata="
{
'username':'johnny134',
'category':'shoes',
'summary':'Just a guy called Johnny',
'userId':1223432432
}"
</a>

To access the username, I have tried const usernames = document.querySelectorAll('a[metadata="username"]'); but just get back undefined. I think my issue is that username is in an object and I can't figure out how to select it.

Thanks in advance

St3ph3n92
  • 203
  • 2
  • 8

1 Answers1

1

First, note that document.querySelectorAll returns a list of elements that match the given query, not a list of the values of attributes of those elements that you specify in the query.

From const users = document.querySelectorAll('a[metadata]'), you can get the metadata attribute of, say, the first element, like so:

const metadata0 = users[0].getAttribute("metadata");

And then, since it's a JSON string, you parse it:

const user0 = JSON.parse(metadata0);

Now you can use user0 like a regular JavaScript object:

user0.username
// johnny134

P.S. The JSON in the metadata attribute is not valid, and you may get an error when you try to parse it. Use double quotes in JSON, not single quotes.

Mubaraq Wahab
  • 303
  • 4
  • 14
  • Thank you for your answer- the separation of getElement and getAttribute, along with the parsing of the JSON is spot on. It works for me. – St3ph3n92 Jun 16 '20 at 13:21