String concatenation within a javascript object

Question

I'm sure there is a simple answer to this but I couldn't find it.

I know how to concatenate a normal string in JavaScript but how would I do it within an object?

I require this as I'm reading through an XML file and creating the HTML for a list of links. Each time I go through the loop I want to create a new <li> containing the link. How do I get the current value of the string and then append the new link on the end? Once I've read through the XML I'll append the HTML to the page.

I've tried:

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

with no success.

Any help is much appreciated.

What you have is fine as far as string concatenation syntax is concerned. Your problem may lie elsewhere (eg with the carParks object itself, or the calling code, etc). — Roatin Marth
– Roatin Marth, Commented Jul 12, 2010 at 13:47
I think your right. I've just made a simplified test script with the same code and it's working. The problem must be somewhere else. Thanks. — Phil Molloy
– Phil Molloy, Commented Jul 12, 2010 at 13:58

Andy E · Accepted Answer · 2010-07-12 14:01:38Z

3

String concatenation with an object property is just the same as anything else. Theoretically the code you have there should work, as long as carParks.links is a writeable property. When you perform string concatenation using the + or += operators, except when using them as arithmetic operators, the operands are converted to strings. For example:

var carParks = {};
carParks.links = carParks.links + "Test";
// -> "undefinedTest", because carParks.links was undefined

If you're getting an error message, check that carParks is defined and is a JavaScript object with writeable properties (e.g. not part of an external interface). If you're getting no error, make sure carParks.links is not a number. If this doesn't help, please post a little more of the surrounding code and I'll take another shot at it.

answered Jul 12, 2010 at 14:01

Andy E

346k86 gold badges482 silver badges452 bronze badges

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

1 Comment

Phil Molloy Over a year ago

Thanks Andy, I realise now that the syntax was correct but I was overwriting that particular property later on in the code.

Roki · Accepted Answer · 2010-07-12 15:56:30Z

if you generate tonns of links maybe try /w array.join();

var tmp = [];

for ([iterate over xml]) {
     tmp.push("<li><a href=\"#\">car park</a></li>");
}

carParks.links = tmp.join('');

faster than repeated string concat

Or what if you create a html documentFragment and the browser do the concat for you... When a DocumentFragment is appended, just the ducument fragment cildNodes appends to the concrete element. And the layout calculated once, not like per element append, and you don't have to care about string concat execution times...

var docFrag = document.createDocumentFragment();
for ([iterate over xml]) {
     var current = document.createElement('li');
     current.innerHTML = "<a href=\"#\">car park</a>";
     docFrag.appendChild(current);
}

theElementToAppendMyList.appendChild(docFrag);

Bryan Kyle · Accepted Answer · 2010-07-12 16:06:16Z

This is basic string concatenation, however depending on your performance considerations there are different ways you might want to accomplish this; essentially it boils down to either using the string concatenation operators that the language gives you, or array joining. The former is pretty straight forward but slow on older browsers while the latter is faster.

In your example, you're using string concatenation just fine. Another way would be to use the += operator:

carParks.links = carParks.links + "<li><a href=\"#\">car park</a></li>";

The array joining approach looks like the following:

var buffer = [];
while(node != null) {
   buffer.push("<li><a href=\"#\">car park</a></li>");
}
carParks.links = buffer.join('');

The array joining approach produces less garbage but I have seen it run more slowly on newer browsers with large (10,000+ items) lists.

Collectives™ on Stack Overflow

String concatenation within a javascript object

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related