I seem to be missing some properties in the request body schema. Why am I receiving an incomplete model for

Seeking assistance in grasping the working of models in loopback4. Here's a model I defined:

@model()
export class ProductViewConfig extends BaseConfig {
  @property({
    type: 'string',
    id: true,
    generated: true,
  })
  _id?: string;


  @property({
    type: 'array',
    itemType: 'object',
  })
  tiles: Array<TileOptions>;


  constructor(data?: Partial<ProductViewConfig>) {
    super(data);
  }
}

export interface ProductViewConfigRelations {
  // describe navigational properties here
}

export type ProductViewConfigWithRelations = ProductViewConfig & ProductViewConfigRelations;

The baseConfig class that it extends from has this structure:

@model({
  settings: {
    strict: true
  }
})
export class BaseConfig extends Entity {
  @property({
    type: 'object',
    required: true,
  })
  configMetadata: ConfigMetadata;

  @property({
    type: 'array',
    itemType: 'object',
  })
  sharedUsers: Array<SharedUsers>;

  @property({
    type: 'array',
    itemType: 'object',
  })
  sharedRoles: Array<SharedRoles>;

  constructor(data?: Partial<BaseConfig>) {
    super(data);
  }
}

export interface BaseConfigRelations {

  // describe navigational properties here
}

export type BaseConfigWithRelations = BaseConfig & BaseConfigRelations;

My ConfigMetadata Model is as follows:

@model({ settings: { strict: true } })
export class ConfigMetadata extends Entity {
  @property({
    type: 'string',
    required: true,
  })
  name: string;

  @property({
    type: 'string',
    required: true,
  })
  description: string;

  @property({
    type: 'date',
    required: true,
  })
  dateCreated: string;

  @property({
    type: 'date',
    required: true,
  })
  lastUpdatedOn: string;

  @property({
    type: 'string',
    required: true,
  })
  creatorId: string;

  @property({
    type: 'string',
    required: true,
  })
  creatorName: string;


  constructor(data?: Partial<ConfigMetadata>) {
    super(data);
  }
}

....

In my controller, there's a post endpoint with a request body using getModelSchemaRef(myObj)

 @post('/product-view-configs')
  @response(200, {
    description: 'ProductViewConfig model instance',
    content: { 'application/json': { schema: getModelSchemaRef(ProductViewConfig) } },
  })
  async create(
    @requestBody({
      content: {
        'application/json': {
          schema: getModelSchemaRef(ProductViewConfig,
            {
              title: 'NewProductViewConfig',
            }),
        },
      },
    })
    productViewConfig: ProductViewConfig,
  ): Promise<ProductViewConfig> {

    return this.productViewConfigRepository.create(productViewConfig);
  }

Here's my question:

Why does the request body not match the expected object structure?

https://i.stack.imgur.com/jlM93.png

I expect the request body to look like this:

{
    "_id" : "string",
    "configMetadata" : {
       "name" : "string",
        "description" : "string",
        "createdOn" : "date",
        "lastUpdatedBy" : "date",
        "creatorId" : "string",
        "creatorName" : "string"
    },
    "sharedUsers" : [ 
        {...}
    ],
    "sharedRoles" : [ 
        {...}
    ],
    "tiles" : [ 
        {...}
    ]
}

So, why aren't the properties from baseConfig showing up? Any guidance would be appreciated as I couldn't find the answer in the loopback4 documentation! Thank you!

Answer №1

Utilizing relations is crucial for connecting models. Exploring concepts such as hasMany and hasOne within the loopback framework can be extremely beneficial in your research journey.

Explore more about relations in LoopBack

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to exclude React.js source files from a fresh Nest.js setup?

My setup includes a fresh Nest.js installation and a directory named "client" with a clean create-react-app installation inside. Here is the project structure: ./ ...some Nest.js folders... client <- React.js resides here ...some more Nest.js fo ...

What is the best way to recycle a single modal in Ionic?

Apologies for the vague title, but I'm facing an issue with creating a single modal to display data from multiple clickable elements, rather than having separate modals for each element. For example, when I click on item 1, its data should be shown in ...

Tips on dynamically looping the formcontrolname and implementing validation strategies

Looking for a way to validate multiple looping of dynamic formControlName="xxx" in select field. Check out my HTML code: <ul *ngFor="let detaillist of stressli.stresstabdetails;"> <li> <div class="form-container"> ...

Using @Input to pass data from a parent component to a

Looking to modularize the form code into a separate component for reusability? Consider using @Input and referencing it in the HTML to pass values to the post method. Here's how you can achieve this: Previously, everything worked smoothly when all th ...

Prevent Duplicate Service Instances in Angular

After doing some thorough research online, I've identified the root of my issue: multiple instances of a particular service are being created. I need assistance in pinpointing and rectifying this problem within my code. The secondary service is depen ...

What is the best way to elucidate this concept within the realm of TypeScript?

While diving into my ts learning journey, I came across this interesting code snippet: export const Field:<T> (x:T) => T; I'm having trouble wrapping my head around it. It resembles the function definition below: type myFunction<T> = ...

In what manner can I retrieve this particular type?

Can you provide me with an example of how to use this type? interface MyCode{ (): Function; title: string; } I've been thinking about various possibilities but haven't been able to figure it out. One approach is: let testCode: MyCode = ...

Build an object using a deeply nested JSON structure

I am working with a JSON object received from my server in Angular and I want to create a custom object based on this data. { "showsHall": [ { "movies": [ "5b428ceb9d5b8e4228d14225", "5b428d229d5b8e4 ...

Issue with React filter function where data is not being displayed when search query is left

I am facing an issue where the data does not show up when the search term is empty. Previously, I used to have this line in my code if (!searchTerm) return data for my old JSON data, and it worked fine. However, now that I'm using Sanity CDN, this lo ...

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

I'm currently working towards integrating the steelseries.js library (found at https://github.com/HanSolo/SteelSeries-Canvas) into a Grafana plugin built with React. It's quite a complex task, but I'm up for the challenge. Right now, my ma ...

Apply a border to the div that has been selected

I have a tool for storing information and I am using *ngFor to display each instance in a line. Is there a way to add a border when clicking on a line? The border should only appear on the clicked line, disappearing from the previous one if another line i ...

Why is the getElement().getProperty("value") function not functioning properly?

I am facing an issue with reading a property in my web component. I am puzzled as to why it is not working correctly. I created a simple example, and after clicking the button, I expect to retrieve the value of the property, but it returns null. I am unsur ...

Generating Pulumi Outputs for exporting as an external configuration file

I am currently utilizing Cloudrun in GCP and am interested in summarizing the created APIs with API Gateway. To achieve this, a Swagger/OpenAPI v2 document needs to be generated containing the google-generated URLs for the Cloudrun Services. How can I ext ...

transferring attributes from a higher component to a lower one (modal)

I am relatively new to React and I want to share a detailed problem description: I have a Todo project that consists of multiple interfaces. The main interface displays all the lists, each containing a title, a group of tasks, and a button to create a ta ...

How can I obtain my .apk file?

I want to convert my app into .apk format. I inserted the following scripts on my "package.json" page: "build:development:android": "ionic cordova build android" and "build:production:android": "ionic cordova build android --prod --release". However, I ...

Injecting Dependencies with Angular 2 and the Ability to Include Optional Parameters

One issue I'm facing is that I have multiple components in my Angular 2 application that require the same dependency. This specific dependency needs a string for the constructor. How can I instruct angular2 to use a specific instance of this type for ...

Issue with rendering Base64 image array strings in FlatList component in React Native

In my RN App, I am trying to display a FlatList with Image Items but it seems like I have missed something. I am retrieving blob data from my API, converting it to a String using Buffer, and then adding it to an Array. This Array is used to populate the F ...

Compiling Typescript with module imports

In my project, I am working with two files named a.ts and b.ts. The interesting part is that file b exports something for file a to use. While the TypeScript compiler handles this setup perfectly, it fails to generate valid output for a browser environment ...

VPS mysteriously terminates TypeScript compilation process without any apparent error

I've encountered an issue while trying to compile my TypeScript /src folder into the /dist folder. The process works smoothly on my local machine, but when I clone the repo onto my VPS (Ubuntu Server 22.04), install npm, and run the compile script, it ...

Mastering Interpolation in React with TypeScript is essential for creating dynamic and interactive UI components. By leveraging the

Incorporating and distributing CSS objects through ChakraUI presents a simple need. Given that everything is inline, it seems the main issue revolves around "& > div". However, one of the TypeScript (TS) errors highlights an unexpected flagging of ...