title: Updating the value of an object inside a loop using javascript
body: <p>I'm currently facing a difficulty in my codes. </p>
  
  <p>First i have an array of objects like this <code>[{Id:1, Name:"AML", allowedToView:"1,2"}, {Id:2, Name:"Res", allowedToView:"1"}...]</code> which came from my service</p>
  
  <p>I assign it in variable <code>$scope.listofResource</code></p>
  
  <p>Then inside of one of my objects I have that <code>allowedToView</code> key which is a collection of Id's of users that I separate by comma.</p>
  
  <p>Then I have this code...</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$scope.listofResource = msg.data
  for (var i = 0; i &lt; msg.data.length; i++) {
  </code></pre>
  
  <p>First I run a for loop so I can separate the <code>Id's</code> of every user in <code>allowedToView</code> key</p>
  
  <pre><code>    var allowed = msg.data[i].allowedToView.split(",");
      var x = [];
  </code></pre>
  
  <p>Then I create a variable <code>x</code> so I can push a new object to it with a keys of <code>allowedId</code> that basically the Id of the users and <code>resId</code> which is the Id of the resource</p>
  
  <pre><code>    for (var a = 0; a &lt; allowed.length; a++) {
          x.push({ allowedId: allowed[a], resId: msg.data[i].Id });
      }
  </code></pre>
  
  <p>Then I put it in <code>Promise.all</code> because I have to get the Name of that "allowed users" base on their Id's using a service</p>
  
  <pre><code>    Promise.all(x.map(function (prop) {
          var d = {
              allowedId: parseInt(prop.allowedId)
          }
  
          return ResourceService.getAllowedUsers(d).then(function (msg1) {
              msg1.data[0].resId = prop.resId; 
  </code></pre>
  
  <p>Here it returns the Id and Name of the allowed user. I have to insert the <code>resId</code> so it can pass to the return object and it will be displayed in <code>.then()</code> below</p>
  
  <pre><code>            return msg1.data[0]
          });
      })).then(function (result) {
  </code></pre>
  
  <p>I got the result that I want but here is now my problem</p>
  
  <pre><code>        angular.forEach(result, function (val) {
              angular.forEach($scope.listofResource, function (vv) {
                  vv.allowedToView1 = [];
                  if (val.resId === vv.Id) {
                      vv.allowedToView1.push(val);
  </code></pre>
  
  <p>I want to update <code>$scope.listofResource.allowedToView1</code> which should hold an array of objects and it is basically the info of the allowed users. But whenever I push a value here <code>vv.allowedToView1.push(val);</code> It always updates the last object of the array. </p>
  
  <pre><code>                 }
               })
          })
     });
  }
  </code></pre>
  
  <p>So the result of my code is always like this
  <code>[{Id:1, Name:"AML", allowedToView:"1,2", allowedToView:[]}, {Id:2, Name:"Res", allowedToView:"1", allowedToView:[{Id:1, Name:" John Doe"}]}...]</code></p>
  
  <p>The first result is always blank. Can anyone help me?</p>
  
  <p>Here is the plunker of it... <a href="http://plnkr.co/edit/9yAxhBbYlTGRVmyweSm9?p=preview" rel="nofollow noreferrer">Plunkr</a></p>