CODEWITHSUNDEEP
angulartypescript
Darron
Darron

Reputation: 343

Type '{}[]' is missing the following properties from type 'ProductInput': id, inputName, required, deleted, values[]

I am new to Angular. I have dummy data that I would like to display in the application.

When I set my variable equal to the interface I created I keep getting the error in the title.

Here is my db-data.ts file.


export const INPUTS: any = {
  0: {
    id: 0,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  },
  1: {
    id: 1,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  },
  2: {
    id: 2,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  }
};

Here is my interface product-input.ts file

export interface ProductInput {
  id: number;
  inputName: string;
  required: boolean;
  deleted: boolean;
  values: string[];
}

Here is the component menu.component.ts file.

import { Component, OnInit } from '@angular/core';
import { ProductInput } from '../../model/product-input';
import {INPUTS} from '../../model/db-data';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  productInput: ProductInput[] = [];

  constructor() { }

  ngOnInit() {
    const inputs = Object.values(INPUTS);

    this.productInput = inputs.filter(input => input.inputName === 'testing');
  }

}

I am expecting to view a list of values taken from the json file. What am I doing wrong?

Upvotes: 1

Views: 3211

Answers (2)

Jordi Cuevas
Jordi Cuevas

Reputation: 56

you should do this instead:

in your db-data.ts:

 export const INPUTS: any = [
     {
       id: 0,
       inputName: 'hello',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
       ]
     },
     {
       id: 1,
       inputName: 'testing',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
     ]
     },
     {
       id: 2,
       inputName: 'testing',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
       ]
     }
   ];

and in your ngOnInit write this down:

this.productInput = this.INPUTS.filter((input) => input.inputName === 'testing');
console.log(this.productInput);

Upvotes: 1

Krantisinh
Krantisinh

Reputation: 1729

Couple of things going wrong -

1) product input should be an array. Hence its name and type should be changed.

2)You need to use === in filter method.

productInputs: ProductInput[] = [];

constructor() { }

ngOnInit() {
    const inputs = Object.values(INPUTS);

    this.productInputs = inputs.filter((input) => input.inputName === 'testing');
}

Upvotes: 0

Related Questions