How can I run a forEach through my array of objects and set a value for the object property that has an empty string?

Question

Part 1 question: How can I use forEach to loop through my array of objects to set the object property of profile_image_url which has an empty string to a default link/value("/media/artist/img_0930-1-9654.jpg").Set the value for only empty strings. I am exploring forEach loop right now. Below is my sample json. I have a json of 20000 users.

Part 2 question: Which one am I better off? Iterate through forEach or regular for loop?

JSON

[{
    "country": "",
    "artist_id": 4,
    "email": "LzoCqLeVpy8h@example.com",
    "profile_image_url": ""
}, {
    "country": "",
    "artist_id": 5,
    "email": "P6H77fnNvgdn@example.com",
    "profile_image_url": ""
}, {
    "country": "US",
    "artist_id": 6,
    "email": "Cjdd4gzSfKM4@example.com",
    "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg"
}, {
    "country": "US",
    "artist_id": 7,
    "email": "m8G3gdhOQmB6@example.com",
    "profile_image_url": "/media/artist/img_0930-1-7654.jpg"
}]

Answer 1

Part 1 question : How can I use forEach to loop through my array of objects to set the object property of profile_image_url which has an empty string to a default link/value("/media/artist/img_0930-1-9654.jpg").

forEach documentation

 var arr = [{ "country": "", "artist_id": 4, "email": "LzoCqLeVpy8h@example.com", "profile_image_url": "" }, { "country": "", "artist_id": 5, "email": "P6H77fnNvgdn@example.com", "profile_image_url": "" }, { "country": "US", "artist_id": 6, "email": "Cjdd4gzSfKM4@example.com", "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg" }, { "country": "US", "artist_id": 7, "email": "m8G3gdhOQmB6@example.com", "profile_image_url": "/media/artist/img_0930-1-7654.jpg" }]; // e: element, i: index arr.forEach(function(e, i) { if (e.profile_image_url === '') { arr[i].profile_image_url = '/media/artist/img_0930-1-9654.jpg'; } }); console.log(arr); document.write('<pre>' + JSON.stringify(arr, 0, 2) + '</pre>'); 

Part 2 question: Which one am I better off? Iterate through forEach or regular for loop ?

Using forEach has benefits of getting index and value from the array. You don't have to explicitly set the index var i = 0; , get the value from array arr[i] and use arr.length for iteration.

Check http://blog.niftysnippets.org/2012/02/foreach-and-runtime-cost.html

Answer 2

Part 1:

 var users = [{ "country": "", "artist_id": 4, "email": "LzoCqLeVpy8h@example.com", "profile_image_url": "" }, { "country": "", "artist_id": 5, "email": "P6H77fnNvgdn@example.com", "profile_image_url": "" }, { "country": "US", "artist_id": 6, "email": "Cjdd4gzSfKM4@example.com", "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg" }, { "country": "US", "artist_id": 7, "email": "m8G3gdhOQmB6@example.com", "profile_image_url": "/media/artist/img_0930-1-7654.jpg" }]; users.forEach(function(user) { if (!user.profile_image_url) { user.profile_image_url = "/media/artist/img_0930-1-9654.jpg"; } }); document.getElementById('users').innerHTML = JSON.stringify(users, null, 2); 

 <pre id="users"></pre> 

Part 2

There won't be much difference if any between using an imperative for loop vs forEach.

The alternative you can consider is defaulting to that image url when you encounter an empty string as a profile_image_url .

---

Using angular as an example, when binding to a view if the profile_img_url is an empty string use the default url.

 var module = angular.module('app', []); module.controller('MyController', function($scope) { $scope.users = [{ "country": "", "artist_id": 4, "email": "LzoCqLeVpy8h@example.com", "profile_image_url": "" }, { "country": "", "artist_id": 5, "email": "P6H77fnNvgdn@example.com", "profile_image_url": "" }, { "country": "US", "artist_id": 6, "email": "Cjdd4gzSfKM4@example.com", "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg" }, { "country": "US", "artist_id": 7, "email": "m8G3gdhOQmB6@example.com", "profile_image_url": "/media/artist/img_0930-1-7654.jpg" }]; }); 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script> <div ng-app="app" ng-controller="MyController"> <div ng-repeat="user in users"> <div>Email: {{user.email}}</div> <div>Profile Image: {{user.profile_image_url || "/media/artist/img_0930-1-9654.jpg"}}</div> <hr> </div> </div>