Confirm the object received from the API and assign default values

Question

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is properly typed.

import { v4 } from "uuid";
import { array, object, string } from "yup";

let mySchema = array(
  object({
    id: string().default(() => v4()),
    title: string().default(""),
    description: string().default(""),
    courseVersions: array(
      object({
        courseCodeId: string().default(""),
        courseName: string().default(""),
      })
    ).default([]),
  })
);

export default function validateCourses(originalObject: any) {

  const cleanObject = mySchema.someFunction(originalObject); // Hope yup has a function

  console.log({ originalObject, cleanObject });

  return cleanObject;
}

javascript typescript validation types yup

Answer 1

Answer №1

To assign validateSync to a variable, simply store it in a new variable and the value will become typed.

const validatedObject = courseSchema.validateSync(originalObject);

console.log({ validatedObject })

Answer 2

To assign validateSync to a variable, simply store it in a new variable and the value will become typed.

const validatedObject = courseSchema.validateSync(originalObject);

console.log({ validatedObject })

Answer 3

Answer №2

It's recommended to utilize interface and typeguard for better programming practices.

interface CourseVersion {
  courseCodeId: string;
  courseName: string;
}

interface MySchema {
  id: string;
  title: string;
  description: string;
  courseVersions: CourseVersion[];
}

let mySchema: MySchema = {
    id: 'mock-id',
    title: 'mock-title',
    description: 'mock-description',
    courseVersions: [
      {courseCodeId: 'mock-courseCodeId', courseName: 'mock-courseName'}
    ]
  })
);

function isMySchema (schema: unknown): schema is MySchema {
   return schema instanceof MySchema;
}

You also have the option to implement it in a different way like this:

function isMySchema (schema: unknown): schema is MySchema {
   return schema?.id !== undefined && typeof schema?.id === 'string'
     && schema?.title !== undefined && typeof schema?.title === 'string'
     etc...;
}

To use it, follow this approach:

export default function validateCourses(originalObject: unknown): MySchema {
  if (isMySchema(originalObject)) {
     return originalObject; // This will work due to the typeguard, casting it into MySchema type
  } else {
     throw Error('wrong schema'); // Handle the scenario where it's not the expected type
  }
}

Note: I hand-coded this, so there may be minor syntax errors.

Answer 4

It's recommended to utilize interface and typeguard for better programming practices.

interface CourseVersion {
  courseCodeId: string;
  courseName: string;
}

interface MySchema {
  id: string;
  title: string;
  description: string;
  courseVersions: CourseVersion[];
}

let mySchema: MySchema = {
    id: 'mock-id',
    title: 'mock-title',
    description: 'mock-description',
    courseVersions: [
      {courseCodeId: 'mock-courseCodeId', courseName: 'mock-courseName'}
    ]
  })
);

function isMySchema (schema: unknown): schema is MySchema {
   return schema instanceof MySchema;
}

You also have the option to implement it in a different way like this:

function isMySchema (schema: unknown): schema is MySchema {
   return schema?.id !== undefined && typeof schema?.id === 'string'
     && schema?.title !== undefined && typeof schema?.title === 'string'
     etc...;
}

To use it, follow this approach:

export default function validateCourses(originalObject: unknown): MySchema {
  if (isMySchema(originalObject)) {
     return originalObject; // This will work due to the typeguard, casting it into MySchema type
  } else {
     throw Error('wrong schema'); // Handle the scenario where it's not the expected type
  }
}

Note: I hand-coded this, so there may be minor syntax errors.

Confirm the object received from the API and assign default values

Answer №1

Answer №2

Similar questions

Achieving the perfect sorting result in an array using Javascript

Angular custom window injection

Strange error message regarding ES6 promises that is difficult to interpret

Exploring the bounds of self-invocation functions in JavaScript

Displaying a div on click using Jquery will only impact one div at a time

Access the HTML file from a different directory

Customizing date colors in JavaScript: A step-by-step guide

Guide on deploying a Next.js React project with IIS on a Windows Server

Guide to uploading a PDF to Google Drive and embedding it on an HTML static website

Error: mangosse is not recognized

Navigating the grid layout in Material UI can be tricky to

Showcasing ranges from various input types on a single page

Tips for implementing a delay in jQuery after an event occurs

Utilizing function arguments in ReactJS

Navigating production mode in nuxtjs and uncovering errors

retrieving the parent of the a tag from a jquery form

Having issues initializing jQuery knob on a jQuery mobile webpage

retrieve undefined value from redux state in a React Native application

Display JSON values in sequence using Material-UI animations

Failure to highlight items when using the multiple select function