数组中的项正在重复。

Question

在尝试传递for循环时，我的数组名称会被重复。

这里我向用户展示了只包含在同一个分支中的用户。

const content_id = '34566553';
          const user_name = 'ray';
this.userDataAsResponse = { 'objectid': 'do_31297612465', 'users' : [
            {
              'userid' : 'u001',
              'username': 'ray',
              'batchcode': 'b001',
              'useravatar': 'https://secure.gravatar.com/avatar/d7d232a9c0d488c843719989a9bb3671?s=800&d=identicon'
            },
            {
              'userid' : 'u004',
              'username': 'umang',
              'batchcode': 'b001',
              'useravatar': 'https://conceptdraw.com/a3179c3/p7/preview/640/pict--clerk,-man-sales-symbols-vector-stencils-library'
            },
            {
              'userid' : 'u002',
              'username': 'robin',
              'batchcode': 'b001',
              'useravatar': 'https://secure.gravatar.com/avatar/d7d232a9c0d488c843719989a9bb3671?s=800&d=identicon'
            },
            {
              'userid' : 'u005',
              'username': 'riki',
              'batchcode': 'b001’,
              'useravatar': 'https://conceptdraw.com/a3179c3/p21/preview/640/pict--customer,-woman-sales-symbols-vector-stencils-library'
            },
            {
              'userid' : 'u006',
              'username': 'george',
              'batchcode': 'b001’,
              'useravatar': 'https://secure.gravatar.com/avatar/d7d232a9c0d488c843719989a9bb3671?s=800&d=identicon'
            },
            {
              'userid' : 'u007',
              'username': 'goof',
              'batchcode': 'b003',
   'useravatar':'https://conceptdraw.com/a3179c3/p7/preview/640/pict--clerk,-man-sales-symbols-vector-stencils-library'
            }
          ]};

         for ( const i in this.userDataAsResponse.users ) {
          if (this.userDataAsResponse.users[i].username  === user_name) {
            this.batchCode = this.userDataAsResponse.users[i].batchcode;
          }
         }

         for (const k in this.userDataAsResponse.users) {
          if (this.batchCode === this.userDataAsResponse.users[k].batchcode) {
            this.showUser[this.j] = this.userDataAsResponse.users[k].username;
              this.userUrl[this.j] = this.userDataAsResponse.users[k].useravatar;
              this.j = this.j + 1;
              console.log('j value’, this.j);
              console.log('show user', this.showUser); //<——  here the values getting added repeatedly.
        }
       }

所以数据是这样来的：-

show user [“ray”]
display.component.ts:432 j valur 2
display.component.ts:433 show user (2) [“ray”, “umang”]
display.component.ts:432 j valur 3
display.component.ts:433 show user (3) [“ray”, “umang”, “robin”]
display.component.ts:432 j valur 4
display.component.ts:433 show user (4) [“ray”, “umang”, “robin”, “riki”]
display.component.ts:432 j valur 5
display.component.ts:433 show user (5) [“ray”, “umang”, “robin”, “riki”, “george”]
display.component.ts:432 j valur 6
display.component.ts:433 show user (6) [“ray”, “umang”, “robin”, “riki”, “george”]
show user (7) [“ray”, “umang”, “robin”, “riki”, “george”, “ray”]
display.component.ts:432 j valur 8
display.component.ts:433 show user (8) [“ray”, “umang”, “robin”, “riki”, “george”, “ray”, “umang”]

就像它在重复show user(18)一样

如何在这个for循环中停止重复？我哪里出问题了？任何需要展示的东西。那就问问吧。

Answer 1

你的循环似乎太复杂了。

您希望存储(并记录)与特定条件匹配的用户的单个用户名数组。数组函数是您在这里的朋友。

我已经以一种简化的方式重新创建了您的示例，以关注数组函数的使用。

batchCode = 'b001';
showUser = [];
userUrl = [];

ngOnInit() {
  // Create a new array containing only users matching a certain condition
  // In this case the condition is that the batch code matches
  const users = this.userDataAsResponse.users
    .filter(x => x.batchcode === this.batchCode);

  // create a new array containing only the username strings
  this.showUser = users.map(x => x.username);

  // you were doing this on every loop as you were building the showUser array,
  // which is why you were seeing duplicates
  console.log('show user', this.showUser);
}

这个答案是为了向您展示如何使用数组函数，以及什么样的方法更好--这不是一个完整的解决方案(因为我们不知道完整的需求是什么)。

演示：https://stackblitz.com/edit/angular-1ru9x5