Как отфильтровать данные из списка и удалить существующую комнату из данных в angular

data = [{
 id: "txv3vvBr8KYB",
 name: "room 1"
},{
 id: "txv3vvBr8KJB",
 name: "room 2"
},{
 id: "txv3vvBr8K",
 name: "room 4"
},{
 id: "txv3vvBr8LKP",
 name: "room 3"
},{
 id: "txv3vvBr8LDS",
 name: "room 5"
}]

roomList = [
 {
      room: {
        code: "r001",
        id: "txv3vvBr8KYB",
        name: "room 1",
        status: "FULL"
      }
    },
 {
      room: {
        code: "r002",
        id: "txv3vvBr8KJB",
        name: "room 2",
        status: "FULL"
      }
    },
 {
      room: {
        code: "r003",
        id: "txv3vvBr8LKP",
        name: "room 3",
        status: "FULL"
      }
    }
]

Здесь я пытаюсь отфильтровать данные из roomList и удалить элемент из данных, когда они имеют одинаковые идентификаторы.

ожидаемый результат должен быть таким:

data = [{
     id: "txv3vvBr8K",
     name: "room 4"
    }{
     id: "txv3vvBr8LDS",
     name: "room 5"
    }]

Пробовал использовать фильтр и карту.

this.data.filter((x: any) => this.roomList.map((y: any) => y['room']['id] === x['id']);

javascript angular typescript

10.12.2020 03:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вероятно, лучше всего сначала уменьшить() идентификаторы комнат в Set , а затем filter() на основе этого:

const ids = roomList.reduce((a, {room: {id}}) => (a.add(id), a), new Set());
const result = data.filter(({id}) => !ids.has(id));

Полный фрагмент:

const data = [{
  id: "txv3vvBr8KYB",
  name: "room 1"
}, {
  id: "txv3vvBr8KJB",
  name: "room 2"
}, {
  id: "txv3vvBr8K",
  name: "room 4"
}, {
  id: "txv3vvBr8LKP",
  name: "room 3"
}, {
  id: "txv3vvBr8LDS",
  name: "room 5"
}];

const roomList = [{
    room: {
      code: "r001",
      id: "txv3vvBr8KYB",
      name: "room 1",
      status: "FULL"
    }
  },
  {
    room: {
      code: "r002",
      id: "txv3vvBr8KJB",
      name: "room 2",
      status: "FULL"
    }
  },
  {
    room: {
      code: "r003",
      id: "txv3vvBr8LKP",
      name: "room 3",
      status: "FULL"
    }
  }
];

const ids = roomList.reduce((a, {room: {id}}) => (a.add(id), a), new Set());
const result = data.filter(({id}) => !ids.has(id));

console.info(result);

В качестве альтернативы, если вы действительно хотите сделать это в одну строку и производительность не такая уж большая проблема, вы можете использовать some():

const result = data.filter(({id}) => !roomList.some(({room}) => room.id === id));

Полный фрагмент:

const data = [{
  id: "txv3vvBr8KYB",
  name: "room 1"
}, {
  id: "txv3vvBr8KJB",
  name: "room 2"
}, {
  id: "txv3vvBr8K",
  name: "room 4"
}, {
  id: "txv3vvBr8LKP",
  name: "room 3"
}, {
  id: "txv3vvBr8LDS",
  name: "room 5"
}];

const roomList = [{
    room: {
      code: "r001",
      id: "txv3vvBr8KYB",
      name: "room 1",
      status: "FULL"
    }
  },
  {
    room: {
      code: "r002",
      id: "txv3vvBr8KJB",
      name: "room 2",
      status: "FULL"
    }
  },
  {
    room: {
      code: "r003",
      id: "txv3vvBr8LKP",
      name: "room 3",
      status: "FULL"
    }
  }
];

const result = data.filter(({id}) => !roomList.some(({room}) => room.id === id));

console.info(result);

10.12.2020 03:56

this.data = this.data.filter(item => item !== data_item);

Ссылка:https://www.codegrepper.com/code-examples/javascript/remove+element+from+list+angular+8

10.12.2020 06:03

Другие вопросы по теме

Создание приложения ionic angular терпит неудачу при сборке из teamcity, но преуспевает везде

Как загрузить список с данными из содержимого HTTP?

Угловой материал MatPaginator: как узнать, нахожусь ли я на последней странице в таблице?

Определите p-checkbox, где происходит событие в Angular

Добавить ключ авторизации через код в пользовательском интерфейсе angular swagger

Как скрыть div после 3 кликов в html

Как правильно добавить поля во все объекты массива документов FireStore с помощью RxJS?

Angular Material Select установить первый вариант по умолчанию

Как экспортировать защиту Angular 10 с помощью ДОКУМЕНТА для общедоступного API

Взять первый массив подмассива с помощью rxjs

Как отфильтровать данные из списка и удалить существующую комнату из данных в angular

Ответы 2

Другие вопросы по теме

Похожие вопросы