Validate that the input is an array

Question

Validate that the input is an array

Looking for a way to determine if a function parameter is an array or not, and then process it accordingly. If the parameter is not an array, convert it into an array before performing the desired function.

For example:

interface employee {
    first: string,
    last: string
}

function updateEmployees (emp: employee | employee[]) {
    let employees = [];
    if (emp instanceof Array) employees = [emp];
    else employees = emp;
    employees.forEach(function(e){
        return 'something'
    })
}

While this logic seems correct, it's raising a warning stating

Type 'employee' is not assignable to type 'any[]'. Property 'length' is missing in type 'employee'.

javascript arrays typescript

Answer 1

Answer №1

Check out the revised version of your code:

function updateStaff (staff: employee | employee[]) {
    let employees: employee[] = [];
    if (Array.isArray(staff)) employees = staff;
    else employees = [staff];
    employees.forEach(function(e){
        return 'something'
    })
}

Alternatively, you can make it more concise:

function updateStaff(staff: employee | employee[]) {
    (Array.isArray(staff) ? staff : [staff]).forEach(function(e){
        return 'something'
    })
}

Answer 2

Check out the revised version of your code:

function updateStaff (staff: employee | employee[]) {
    let employees: employee[] = [];
    if (Array.isArray(staff)) employees = staff;
    else employees = [staff];
    employees.forEach(function(e){
        return 'something'
    })
}

Alternatively, you can make it more concise:

function updateStaff(staff: employee | employee[]) {
    (Array.isArray(staff) ? staff : [staff]).forEach(function(e){
        return 'something'
    })
}

Answer 3

Answer №2

Here is a function in Typescript that ensures an array is returned safely. It checks for null or undefined items and returns an empty array if found.

function safeArray<T>(value: T | T[]): T[] {
  if (Array.isArray(value)) {
    return value
  } else if (value === undefined || value === null) {
    return []
  } else {
    return [value]
  }
}

If you want to include null or undefined items:

function safeArray<T>(value: T | T[]): T[] {
  if (Array.isArray(value)) {
    return value
  } 
  else {
    return [value]
  }
}

Usage example:

function updateEmployees(emp: employee | employee[]) {
    safeArray(emp).forEach(function(e){
        return 'something'
    })
}

The additional check prevents runtime errors when encountering null or undefined elements, ensuring the loop iterates only over 'employees'.

Answer 4

Here is a function in Typescript that ensures an array is returned safely. It checks for null or undefined items and returns an empty array if found.

function safeArray<T>(value: T | T[]): T[] {
  if (Array.isArray(value)) {
    return value
  } else if (value === undefined || value === null) {
    return []
  } else {
    return [value]
  }
}

If you want to include null or undefined items:

function safeArray<T>(value: T | T[]): T[] {
  if (Array.isArray(value)) {
    return value
  } 
  else {
    return [value]
  }
}

Usage example:

function updateEmployees(emp: employee | employee[]) {
    safeArray(emp).forEach(function(e){
        return 'something'
    })
}

The additional check prevents runtime errors when encountering null or undefined elements, ensuring the loop iterates only over 'employees'.

Validate that the input is an array

Answer №1

Answer №2

Similar questions

Interactive 3D model movable within designated area | R3F

Discovering if an agent is a mobile device in Next.js

How can I suggest the return type of a function that is out of my control?

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

javascript ondrag while self-pressing

Discover the power of catching Custom DOM Events in Angular

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Create random animations with the click of a button using Vue.js

Unveil as you scroll - ScrollMagic

Update state within React components without impacting any other state variables

Creating a server that is exclusive to the application in Node.js/npm or altering the response body of outgoing requests

The HTML embed element is utilized to display multimedia content within a webpage, encompassing

Gulp does not generate any new folders

Is it possible for npm to assist in determining the appropriate version of Primeng that is compatible with Angular 16 dependencies

The issue with Ajax file upload is that it only processes the first file in the filelist array for

Error in React-Native: Unable to locate main project file during the build process

AngularJS enables box to smoothly slide up and down when hovered over

Determining the height of dynamically rendered child elements in a React application

Index.js is dynamically importing a .tsx file post-build, with a specific focus on Windows

Learn how to showcase video information in a vue.js template