Assigning JSON to Array of type Interface

问题:

In a angular project, I have following interface:

export interface FruitsType {

  id: String;
  name: String;
  selected : String;
}

And following JSON:

{
  [
      {"id" :"f1", "name": "apple", "selected": "false"},
      {"id": "f2" , "name":"orange", "selected": "false"}
   ]
}

The GOAL is to assign name of the fruits to a checkbox.

I have read the JSON file using a service--in the ngonINIT-- which it's output is as follows:

0:{id: "f1", name: "apple", selected: "false"}
1:{id: "f2", name: "orange", selected: "false"}

I want to assign the id and name of above output to the corresponding in the interface and push it to an array. Is that possible? HOW?

here what I have tried

// here is my service: 

 getJSON (): Observable<FruitsType[]> {
    return this.http.get<FruitsType[]>((this.configUrl))
  }
  
// and here is how i get the response:

this.jsonService.getJSON().subscribe(response => {

      // THAT WORKS FINE
      console.log("here is the forst fruit: " + response[1].name);
      console.log("here is the forst fruit: " + response[1].id);
      //console.log(response.length);


      // WANTS TO ADD THE RESPONSE TO AN INTERFACE
      for (let i=0; i<response.length; i++){
        this.fruitInterface.push({id: response[i].id, name: response[i].name, selected :  response[i].selected });
       
             }
     console.log("lenght  " +   this.fruitInterface.length);
    })



  }

the this.fruitInterface has the lenght of 2, meaning the values has been added. BUT I CANNOT READ THEM :(( I do : this.fruitInterface.name ==> gives error in array to say: this.fruitInterface[i].name ==> does not work

PLEASE HELP ME

回答1:

Iam updated your code as little bit worked fine iam checked.

Declared variable like this

public fruits: FruitsType[] = [];

Here my method

public getJSON() {
    this.http.get("assets/file.json")
      .subscribe(response => {                

       //here iam converting response as json
       let temp=response.json();

      //here iam getting fruits data in temp variable
        this.fruits=temp.fruites;
       //printing fruits Array.
        console.log("Fruits",this.fruits);

        //here iam newly added access in typescript file
         for(let fruit of this.fruits){
            console.log("Fruit Name",fruit.name);
         }
         console.log("Fruits access via index--->",this.fruits[0].name);
       })
  }

//here iam newly added access in Html file

<ul *ngFor="let item of fruits">
  <li>Fruit Name :{{item.name}}</li>
  <li>Id :{{item.id}}</li>
  <li>selected :{{item.selected}}</li>
</ul>

Note:-here fruits is any array so you cant directly access like this. this.fruits.name (Wrong).

Working Fine iam tested i believe its useful to solve your problem. If any errror please let me know. if it is solved problem please mark as answer.

Sample output window also attached

回答2:

You can assign the fruites response to any local variable you define within your component. From there it can be used to do whatever you would like as far as display or manipulating data. The interface just insures that the type is correct for the response data.

In the service you can define the type of response if you would like -

return this.http.get<FruitsType[]>(params)

That will insure that the response is an array of FruitsType objects. Then in your component where you call the service you can simply assign the response to a variable and correctly assume it will follow the FruitsType interface.

this.service.getFruit.subscribe(res => {
  this.fruites = res
})

回答3:

Have you tried this?

const fruitInterface= jsonArray.map(res => (res.json() as FruitsType));

This will take each of your json objects returned from the service (that you now have in an array) and return an array of FruitTypes instead of json objects. From a bit more complicated question here.

回答4:

Here is how I get the things work, at the end:

The service to read the JSON:

  getJSON (): Observable<FruitsType[]> {
    return this.http.get<FruitsType[]>((this.configUrl))
  }

or newbiws like me, remamber you need to import the services in the app.module.ts as fallows:

import { ReadJsonService } from './services/read-json.service'

and then add it to the Providers: 

  providers: [AuthService,ReadJsonService],

here is the interface:

export interface FruitsType {

  id: String;
  name: String;
  selected: String;
}

you can create the interface using the following command: ng generate interface NameOfTheInterface

here is how I called the service and the rest:

  ngOnInit() {
    this.jsonService.getJSON().subscribe(response => {


      for (const i of response) {    // this is just to see it works

        console.log('ID - ', i.id);
        console.log('Name - ', i.name);
        console.log('Selected - ', i.selected);
      }

      for (let i=0; i<response.length; i++){
        this.fruitInterface.push({id: response[i].id, name: response[i].name, selected : response[i].selected });
        console.log("response[i].id" + response[i].id);

      }
     
    }

  }

and here is the checkbox where i use the name of fruites:

<div >
  <label for="fruits">fruits:</label>
  <div *ngFor="let fruit of fruitInterface">
    <label>
      <input type="checkbox"
             name="fruits"

      >

      {{fruit.name}}
    </label>
  </div>

</div>

HOPE IT HELPS SOME NEWBIES LIKE ME :)