Concatenate object text values with for loop - Javascript

Question

I'm trying to take an array of names and add them to a single variable using a for loop then display it to the console.

var list = "";
var names = document.getElementsByTagName('h3');

for(i=0;i<names.length;i++){
    list = list.concat(names[i].firstChild);
}

console.log(list);

But it outputs a long list of:

[object Text][object Text][object Text][object Text][object Text][object Text][object Text]

Note:
console.log(names[22].firstChild) outputs "Richard" in the console just fine. I'm just having problems concatenating them to the variable list.

The code of the is as follows.

<h3 style="color:white; font-weight:300;" class="staff">
  Richard Smith<br>
  <span style="font-size:14px;">Data Analyst</span>
</h3>

That is why I used .firstChild. If I use .innerText it returns both the name and the <span> that follows it.

try to use not firstChild but innerText

MysterX
– MysterX

2015-09-11 19:08:28 +00:00
Commented Sep 11, 2015 at 19:08 — MysterX
– MysterX, Commented Sep 11, 2015 at 19:08
@jfriend00 Because list is a string

hindmost
– hindmost

2015-09-11 19:10:54 +00:00
Commented Sep 11, 2015 at 19:10 — hindmost
– hindmost, Commented Sep 11, 2015 at 19:10

Andrew Mairose · Accepted Answer · 2015-09-11 19:20:35Z

2

The names[i].firstChild attribute references a text node that contains the value you would like to get at.

Instead of accessing the firstChild attribute, use innerHTML or innerText to get a string rather than a text node.

I added a space in between each name as well.

var list = "";
var names = document.getElementsByTagName('h3');

for (i = 0; i < names.length; i++) {
  list = list.concat(names[i].innerHTML.split('<br>')[0] + ' ');
}

console.log(list);

<h3 style="color:white; font-weight:300;" class="staff">
  Richard Smith<br>
  <span style="font-size:14px;">Data Analyst</span>
</h3>

EDIT:

Updated answer after OP posted HTML.

With the HTML structure you are using, the innerText attribute will retrieve the job title as well.

If all of your <h3> tags are formatted the same way, you can get the innerHTML, then split the string at the <br>, then take the first half that contains the name and append it to your list.

edited Sep 11, 2015 at 19:20

answered Sep 11, 2015 at 19:08

Andrew Mairose

11.1k15 gold badges62 silver badges108 bronze badges

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

1 Comment

Connor Clark Over a year ago

the trick is to use innerText. It seems + ' ' isn't necessary (also, it is not the same as the code in the question. Extra spaces.)

SillasSoares · Accepted Answer · 2015-09-11 19:36:19Z

1

Use nodeValue

var list = "";
var names = document.getElementsByTagName('h3');

for(i=0;i<names.length;i++){
    list = list.concat(names[i].firstChild.nodeValue + ' ');
}

console.log(list);

JsFiddle

answered Sep 11, 2015 at 19:36

SillasSoares

3821 silver badge7 bronze badges

Collectives™ on Stack Overflow

Concatenate object text values with for loop - Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related