Changing values of each object in Javascript

Question

What is the best way to add the additional path information to each javascript object? Like "assets/img/upload/" before each jpg name? That I have url="assets/img/upload/02.jpg" etc.? That would be great help!

My data right now:

[Object { url="02.jpg"}, 
 Object { url="03.jpg"}, 
 Object { url="09.jpg"}, 
 Object { url="04.jpg"}, 
 Object { url="5.jpg"}
 ...]

how are you getting this data in the first place? because you can simply add the url string before the url current value — Ibu, May 08 '12 at 22:20
This is not a legal javascript data structure. Where did this come from? — jfriend00, May 08 '12 at 22:22
thanks for asking...its from database table i can't change... — Jurudocs, May 08 '12 at 22:23

score 1 · Accepted Answer · answered May 08 '12 at 22:20

1

A simple for loop:

for(var i = 0; i < array.length; i++)
{
  array[i].url = "assets/img/upload/" + array[i].url;
}

answered May 08 '12 at 22:20

Matthew Flaschen

278,309
50
514
539

The position of the curly braces: should be on the same line as the for statement to avoid automatic semi-colon insertion. Definitely a must. – frenchie May 08 '12 at 23:24
@frenchie, no. There is no automatic semi-colon insertion in the above code (or any similar loop code). – Matthew Flaschen May 09 '12 at 00:25
@frenchie, I am familiar with automatic semi-colon insertion, and it does not affect syntax like the above. [Working demo](http://jsfiddle.net/zrVXM/1/). If you find any version of any browser that has semi-colon insertion on that code, let me know. – Matthew Flaschen May 09 '12 at 01:05
@frenchie, the docs make clear that JSlint "looks at some style conventions as well as structural problems." This is a style preference issue. The relevant option here is "Tolerate messy white space". However, I don't agree that this whitespace is messy. The docs don't mention a connection between this option and semi-colon insertion, and there is none for this code. – Matthew Flaschen May 09 '12 at 15:11

frenchie · Answer 2 · 2012-05-08T22:37:55.910

1

Suppose your array of objects is called MyArray:

for (var i = 0, LoopTimes = MyArray.length; i < LoopTimes; i++) {
       MyArray[i].url = "assets/img/upload/" + MyArray[i].url;
}

Note that:

a) the opening curly brace goes on the same line as the for statement. See Crokfod on Javascript The Good Parts on youtube for the explanation. In javascript, putting the opening brace on the next line can create some weird bugs that are hard to detect.

b) I cache the length of MyArray in LoopTimes so that I don't have to evaluate the length of the array at every iteration.

edited May 08 '12 at 22:37

answered May 08 '12 at 22:20

frenchie

51,731
109
304
510

Have you benchmarked the impact of caching the length? Modern JavaScript VMs are increasingly optimized, so it may be cached or inlined by the VM. Even if not, that doesn't mean it's a big impact. – Matthew Flaschen May 08 '12 at 23:03
Not benchmarked but for sure at least as fast and probably faster than not caching it and for sure no slower. You might want to google the topic; caching array length is considered best practice. – frenchie May 08 '12 at 23:22
I found a [question](http://stackoverflow.com/questions/6261953/do-modern-javascript-jiters-need-array-length-caching-in-loops) on it. It seems to be automatically optimized in some browsers, but not others. – Matthew Flaschen May 09 '12 at 00:37

score 0 · Answer 3 · edited May 09 '12 at 15:12

0

If you are only going to be running this code in a modern browser, you could always consider using the map method of the Array object.

Assuming your array of objects is called "array"

array.map(function(item) {return item.url = "assets/img/upload/" + item.url;});

This runs the anonymous function, that takes an "item" in the array, and returns the modified url field, over each element of the array.

If you need your code to run on older browsers, stick with the for loops suggested by the other contributors.

edited May 09 '12 at 15:12

Matthew Flaschen

278,309
50
514
539

answered May 08 '12 at 23:01

Robert Price

41
1

I consider this confusing. The point of `map` is to return a new array (which you're discarding). You're not really supposed to modify it in place. That's what [`array.forEach`](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach) is for. – Matthew Flaschen May 08 '12 at 23:05
`map` is allowed to manipulate the array contents, but as a new array doesn't need to be created and returned you are right that `foreach` could be more appropriate. – Robert Price May 09 '12 at 14:01

Changing values of each object in Javascript

3 Answers3