CODEWITHSUNDEEP
javascriptarraysjsonloopsforeach
Mihir Patel
Mihir Patel

Reputation: 2372

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

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": "[email protected]",
    "profile_image_url": ""
}, {
    "country": "",
    "artist_id": 5,
    "email": "[email protected]",
    "profile_image_url": ""
}, {
    "country": "US",
    "artist_id": 6,
    "email": "[email protected]",
    "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg"
}, {
    "country": "US",
    "artist_id": 7,
    "email": "[email protected]",
    "profile_image_url": "/media/artist/img_0930-1-7654.jpg"
}]

Upvotes: 2

Views: 101

Answers (2)

Tushar
Tushar

Reputation: 87203

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": "[email protected]",
  "profile_image_url": ""
}, {
  "country": "",
  "artist_id": 5,
  "email": "[email protected]",
  "profile_image_url": ""
}, {
  "country": "US",
  "artist_id": 6,
  "email": "[email protected]",
  "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg"
}, {
  "country": "US",
  "artist_id": 7,
  "email": "[email protected]",
  "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

Upvotes: 2

dting
dting

Reputation: 39287

Part 1:

var users = [{
    "country": "",
    "artist_id": 4,
    "email": "[email protected]",
    "profile_image_url": ""
}, {
    "country": "",
    "artist_id": 5,
    "email": "[email protected]",
    "profile_image_url": ""
}, {
    "country": "US",
    "artist_id": 6,
    "email": "[email protected]",
    "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg"
}, {
    "country": "US",
    "artist_id": 7,
    "email": "[email protected]",
    "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": "[email protected]",
    "profile_image_url": ""
  }, {
    "country": "",
    "artist_id": 5,
    "email": "[email protected]",
    "profile_image_url": ""
  }, {
    "country": "US",
    "artist_id": 6,
    "email": "[email protected]",
    "profile_image_url": "/media/artist/zizmor_039_low_res-1239.jpg"
  }, {
    "country": "US",
    "artist_id": 7,
    "email": "[email protected]",
    "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>

Upvotes: 2

Related Questions