Значения массива переопределяются последними угловыми значениями 7

Question

Я работаю над массивами, в которых я использую функцию карты для изменения данных. у меня есть массив иконок, как показано ниже.

private socialIcons:any[] = [
      {"icon":"thumbs-up","operation":"like"},
      {"icon":"thumbs-down","operation":"unlike"},
      {"icon":"eye","operation":"view"},
      {"icon":"text","operation":"comment"},
    ];

Выше массив значков, которые я буду передавать в дочерний компонент. Я получаю данные из бэкэнда с помощью сервисных вызовов. Я использую карту для изменения данных, как показано ниже.

this.esServices.loadEsdata(obj).pipe(map(res=>res.json())).subscribe(res=>{

        res.map(x=>{
         x["socialIcons"] = this.socialIcons
            x["socialIcons"].map(icon=>{
              switch(icon.operation){
                  case 'like':{
                      icon["value"] = x["nooflikes"]
                       break;
                  }
                  case 'unlike':{
                      icon["value"] = x["nooflikes"]
                      break;
                  }
                  case 'view':{
                      icon["value"] = x["views"]
                      break;
                  }
                  case 'comment':{
                      icon["value"] = x["noofcomments"]
                      break;
                  }
              }

           })
          console.log(x)
          return x;
        }),
        this.datacount = res.length;
        this.creatives = this.creatives.concat(res);

      })

Проблема в том, что ... x ["socialIcons"] второго элемента переопределяет x ["socialIcons"] первого элемента в res. Чтобы быть более понятным. консольный вывод первого элемента ожидаемый результат:

[0:{
    resource_name: "potterypainting_40.jpg"
    socialIcons: Array(4)
    0: {icon: "thumbs-up", operation: "like", value: 1}
    1: {icon: "thumbs-down", operation: "unlike", value: 1}
    2: {icon: "eye", operation: "view", value: 0}
    3: {icon: "text", operation: "comment", value: 0}
    length: 4
    }]

Примечание: также проверено с точкой останова, я получаю выходные данные, как и ожидалось в первой итерации, но, когда начинается вторая итерация, значения массива, полученные в первой итерации, переопределяются со значениями второй итерации, как показано ниже. следовательно, массивы socailIcon в обоих элементах будут одинаковыми, что неверно. Получен вывод

[0:{
        resource_name: "potterypainting_40.jpg"
        socialIcons: Array(4)
        0: {icon: "thumbs-up", operation: "like", value: 0}
        1: {icon: "thumbs-down", operation: "unlike", value: 0}
        2: {icon: "eye", operation: "view", value: undefined}
        3: {icon: "text", operation: "comment", value: 0}
        length: 4
        }]

консольный вывод второго элемента

[1:{
    resource_name: "streetart_41.jpg"
    socialIcons: Array(4)
    0: {icon: "thumbs-up", operation: "like", value: 0}
    1: {icon: "thumbs-down", operation: "unlike", value: 0}
    2: {icon: "eye", operation: "view", value: undefined}
    3: {icon: "text", operation: "comment", value: 0}
    length: 4
   }]

Заметьте, что имя_ресурса для обоих различно, но только socialIcons переопределяется последним.

Пожалуйста, дайте мне знать, где я иду не так.

Answer 1

Оператор map работает не так.Вы должны присвоить это чему-либо.

Попробуйте это:

x['socialIcons'] = this.socialIcons;
x['socialIcons'] = x['socialIcons'].map(icon => { // This line
  switch (icon.operation) {
    case 'like': {
      icon['value'] = x['nooflikes'];
      break;
    }
    case 'unlike': {
      icon['value'] = x['nooflikes'];
      break;
    }
    case 'view': {
                                icon['value'] = x['views'];
                                break;
    }
    case 'comment': {
      icon['value'] = x['noofcomments'];
      break;
    }
  }
});