Angular 5中如何将接口返回的JSON数据存入数组？

Let's break this down step by step to get your API data into the stors array properly.

First, make sure you have a strongly-typed interface for your Storage type that matches the structure of the data coming from the API. This helps with type safety and IDE autocomplete:

// Define this either in your component file or a separate interfaces file
export interface Storage {
  volume: number;
  name: string;
  weight: number;
  storage: number;
}

Next, update your component to handle the API response and map the data to stors. I'll assume you're using Angular's HttpClient to fetch the data (standard practice for Angular apps):

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// Your Storage interface here
export interface Storage {
  volume: number;
  name: string;
  weight: number;
  storage: number;
}

export class StorageComponent implements OnInit {
  private stors: Storage[] = []; // Initialize with empty array to avoid undefined issues

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Replace 'your-api-endpoint' with your actual API URL
    this.http.get<any>('your-api-endpoint').subscribe(apiResponse => {
      // Validate the response first (optional but recommended)
      if (apiResponse.response === 'true' && apiResponse.type === 'Storages') {
        // Map the API data to your Storage array
        // Option 1: Explicit mapping (safer if you need to transform data)
        this.stors = apiResponse.data.map((item: any) => ({
          volume: item.volume,
          name: item.name,
          weight: item.weight,
          storage: item.storage
        }));

        // Option 2: Type assertion (simpler if field names/types match exactly)
        // this.stors = apiResponse.data as Storage[];
      }
    });
  }
}

Key Notes: #

• Initialize the array: Always initialize stors as an empty array (= []) to prevent errors when trying to use it before data loads.
• Validate the response: Checking apiResponse.response and apiResponse.type ensures you're only processing valid data from the API.
• Mapping options: Use explicit mapping if you need to adjust data (e.g., convert string values to numbers), or type assertion if the API data structure is an exact match for your Storage interface.

If you already have the API response stored in a data variable (like you mentioned in your code snippet), you can skip the HTTP call part and just run the mapping directly:

// Assuming this.data holds the API's response.data array
this.stors = this.data.map((item: any) => ({
  volume: item.volume,
  name: item.name,
  weight: item.weight,
  storage: item.storage
}));

内容的提问来源于stack exchange，提问作者Dimitris