typescript array filter attributes

Question

typescript array filter attributes

I encountered a situation where I had 2 separate arrays:

  items = [
    {
      offenceType:"7",
      offenceCode:"JLN14",
    }, 
    {
      offenceType:"48",
      offenceCode:"JLN14",
    }
  ];



  demo = [
    {
      offenceCode: 'JLN14',
      offenceType: '7',
      offenceDesc: 'emergency lane abuse'
    },
    {
      offenceCode: 'JLN14',
      offenceType: '48',
      offenceDesc: 'speeding'
    },
    {
      offenceCode: 'JLN13',
      offenceType: '52',
      offenceDesc: 'parking abuse'
    }
  ];

I needed to filter certain attributes between these 2 arrays. For example, in the items array, there are offenceType and offenceCode values which need to be compared with the demo array that contains offenceType, offenceCode, and offenceDesc. If both offenceType and offenceCode match, then I need to retrieve the offenceDesc from the demo array. Here is the approach I tried based on my research:

  newArray = [];

  // create new array to map 2 objects
  this.items.forEach(x => {
    this.newArray.push(x.offenceCode, x.offenceType);
    console.log('newArray',this.newArray);
    // doing filter
  })

Here is a link to my stackblitz demo

Previously, I asked a similar question on Stack Overflow but I couldn't find a solution even after multiple attempts. Being new to coding, I would appreciate any suggestions on how to solve this problem.

javascript angular typescript

Answer 1

Answer №1

Utilize a map function

const items = [
  {
    offenceType:"7",
    offenceCode:"JLN14",
  }, 
  {
    offenceType:"48",
    offenceCode:"JLN14",
  }
];

const demo = [
  {
    offenceCode: 'JLN14',
    offenceType: '7',
    offenceDesc: 'emergency lane abuse'
  },
  {
    offenceCode: 'JLN14',
    offenceType: '48',
    offenceDesc: 'speeding'
  },
  {
    offenceCode: 'JLN13',
    offenceType: '52',
    offenceDesc: 'parking abuse'
  }
];

const newArray = items.map(item => {
   const lookup = demo.find(i => item.offenceType === i.offenceType);
   return {
     offenceType: lookup.offenceType,
     offenceCode: lookup.offenceCode,
     offenceDesc: lookup.offenceDesc
   }
});

console.log(newArray);

Answer 2

Utilize a map function

const items = [
  {
    offenceType:"7",
    offenceCode:"JLN14",
  }, 
  {
    offenceType:"48",
    offenceCode:"JLN14",
  }
];

const demo = [
  {
    offenceCode: 'JLN14',
    offenceType: '7',
    offenceDesc: 'emergency lane abuse'
  },
  {
    offenceCode: 'JLN14',
    offenceType: '48',
    offenceDesc: 'speeding'
  },
  {
    offenceCode: 'JLN13',
    offenceType: '52',
    offenceDesc: 'parking abuse'
  }
];

const newArray = items.map(item => {
   const lookup = demo.find(i => item.offenceType === i.offenceType);
   return {
     offenceType: lookup.offenceType,
     offenceCode: lookup.offenceCode,
     offenceDesc: lookup.offenceDesc
   }
});

console.log(newArray);

Answer 3

Answer №2

To get the offense description, create a function that searches for it and then apply the function using map on the items


const offenses = [
  {
    offenseType:"7",
    offenseCode:"JLN14",
  }, 
  {
    offenseType:"48",
    offenseCode:"JLN14",
  }
];

function findOffenseDescription(item) {
    const offenseData = [
        {
          offenseCode: 'JLN14',
          offenseType: '7',
          offenseDescription: 'emergency lane abuse'
        },
        {
          offenseCode: 'JLN14',
          offenseType: '48',
          offenseDescription: 'speeding'
        },
        {
          offenseCode: 'JLN13',
          offenseType: '52',
          offenseDescription: 'parking abuse'
        }
      ];
      const match = offenseData.find(offense => offense.offenseCode === item.offenseCode && offense.offenseType === item.offenseType);
      return match && match.offenseDescription;
}

const newOffensesArray = offenses.map(findOffenseDescription);
console.log(newOffensesArray); // [ "emergency lane abuse", "speeding" ]

Answer 4

To get the offense description, create a function that searches for it and then apply the function using map on the items


const offenses = [
  {
    offenseType:"7",
    offenseCode:"JLN14",
  }, 
  {
    offenseType:"48",
    offenseCode:"JLN14",
  }
];

function findOffenseDescription(item) {
    const offenseData = [
        {
          offenseCode: 'JLN14',
          offenseType: '7',
          offenseDescription: 'emergency lane abuse'
        },
        {
          offenseCode: 'JLN14',
          offenseType: '48',
          offenseDescription: 'speeding'
        },
        {
          offenseCode: 'JLN13',
          offenseType: '52',
          offenseDescription: 'parking abuse'
        }
      ];
      const match = offenseData.find(offense => offense.offenseCode === item.offenseCode && offense.offenseType === item.offenseType);
      return match && match.offenseDescription;
}

const newOffensesArray = offenses.map(findOffenseDescription);
console.log(newOffensesArray); // [ "emergency lane abuse", "speeding" ]

Answer 5

Answer №3

Another method that can be used is filter and map in order to extract the desired offenceDesc information.

const offenseDescriptions = data.filter(
    element => items.find(item => item.offenseCode === element.offenseCode
                         && item.offenseType === element.offenseType))
    .map(value => value.offenseDesc)

Answer 6

Another method that can be used is filter and map in order to extract the desired offenceDesc information.

const offenseDescriptions = data.filter(
    element => items.find(item => item.offenseCode === element.offenseCode
                         && item.offenseType === element.offenseType))
    .map(value => value.offenseDesc)

Answer 7

Answer №4

To implement negated logic, utilize the every() method.

Check out the relevant code snippet:

...

  newArray = [];

  constructor() { }

  ngOnInit() {
    let  foundOffence: any;

    this.items.forEach(itemsOffence => {
      this.demo.every(demoOffence => {
        let isNoMatch: boolean = demoOffence.offenceCode != itemsOffence.offenceCode || demoOffence.offenceType != itemsOffence.offenceType;
        foundOffence = isNoMatch? undefined: demoOffence;
        return isNoMatch;
      })
      if (foundOffence) {
        console.log(`foundOffenceDesc = ${foundOffence.offenceDesc}`);
        this.newArray.push(foundOffence);
      }
    })
    console.log("newArray = ", this.newArray);
  }

...

Observe this functionality in action through the following StackBlitz demo

Answer 8

To implement negated logic, utilize the every() method.

Check out the relevant code snippet:

...

  newArray = [];

  constructor() { }

  ngOnInit() {
    let  foundOffence: any;

    this.items.forEach(itemsOffence => {
      this.demo.every(demoOffence => {
        let isNoMatch: boolean = demoOffence.offenceCode != itemsOffence.offenceCode || demoOffence.offenceType != itemsOffence.offenceType;
        foundOffence = isNoMatch? undefined: demoOffence;
        return isNoMatch;
      })
      if (foundOffence) {
        console.log(`foundOffenceDesc = ${foundOffence.offenceDesc}`);
        this.newArray.push(foundOffence);
      }
    })
    console.log("newArray = ", this.newArray);
  }

...

Observe this functionality in action through the following StackBlitz demo

typescript array filter attributes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Rerendering of a React component occurs upon a change in its state

Issue occurred: The error "Undefined offset 1" was encountered while trying to upload a file via

The function is triggered only on resize, not on initial load

Using JSON data to render images onto a canvas

Aliases in Typescript are failing to work properly when used alongside VSCode Eslint within a monorepository

Interactive Vue components with dynamic children and sub-children

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

Unable to send a String to the controller via ajax

Go all the way down to see the latest messages

Can the details of a package be retrieved from a Nuget private store using a REST API?

Refresh the dataTable following the form submission within the colorbox

Manually browse through images in photoswipe by clicking on them to move to the previous or next ones

A tiny blue spot popping up beside the roster of users

Retrieve information from an ajax call within an Angular application

React - The previous condition is maintained when selected

Extending Mongoose's capabilities with header files for the "plugin" feature, utilizing the .methods and .statics methods

Error: Undefined Function [Thinkster.io's Angular Tutorial Chapter 4]

Empty Media Viewer

Ways to display the chosen value based on the item's index using Javascript in Angular

Exploring the world of jQuery sliders and dynamically updating div container content