如何在Angular 4中接收json数组并在服务文件中迭代它

我在Angular4应用程序中工作，在这里我需要接收和迭代json对象，并将其传递给另一个组件。这里我尝试了一些方法，请帮助我解决这个问题

json响应格式

服务文件

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';


@Injectable()
export class CartdataService {

  public i_product_Path = new BehaviorSubject<any>('');
  i_cast_Product_Path = this.i_product_Path.asObservable();

  i_COUNTER :number;
  big_Image_Path:string[][];
 constructor(private http: HttpClient) { }

 get_Product_Path(pName: string) {
    this.current_product = pName.trim();
    this.http.get(`http://localhost:57036/api/data/GetImage/?imageName=${this.current_product}`)
    .subscribe((data) => {

        this.i_COUNTER = data[0].Count;
 if(this.i_COUNTER >0) {
          let i:number;
            for( i=0;i<=this.i_COUNTER;i++){
              this.big_Image_Path =data[0]['big_Images'];
            }
        }
 this.i_product_Path.next(this.big_Image_Path);
 });
  }
}

从'@angular/core'导入{Injectable}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
从'@angular/common/http'导入{HttpClient}；
导入'rxjs/add/operator/map'；
@可注射（）
导出类CartdataService{
公共i_产品_路径=新行为主体
根据您的输入字符串，这是工作代码

  parseJsonToObj() {
    const json = '[[{ "big_Images": "assets/Images/Product_Details_Page/Show1.png" }, { "big_Images": "assets/Images/Product_Details_Page/Show2.png" }, { "big_Images": "assets/Images/Product_Details_Page/Show3.png" }], [{ "small_Images": "assets/Images/Product_Details_Page/Product_Details_Page_Thumbnails/bal1.png" }, { "small_Images": "assets/Images/Product_Details_Page/Product_Details_Page_Thumbnails/bal2.png" }, { "small_Images": "assets/Images/Product_Details_Page/Product_Details_Page_Thumbnails/bal3.png" }], [{ "selected_Product_Image": "assets/Images/Modal_Screen/added.png" }]]'
    const images: Images = JSON.parse(json);
    console.log(images);
  }

要处理json创建的接口（如下所示），可以轻松获取数据

export interface Images {
  big_Images: BImage[];
  small_Images: Simage[];
  selected_Product_Images: SelectedImage[]
}

export interface BImage {
  big_Images: string;
}

export interface Simage {
  small_Images: string;
}

export interface SelectedImage {
  selected_Product_Image: string;
}

基本上，我将json响应转换为typescript对象


对于给定的结构，这应该适合您

  this.http.get(url).subscribe(
      (response: Images ) => {    
          console.log(response); 
      },
      error => {
          console.log(JSON.stringify(error));
      },
      () => { }
    );

你能提供你的json回复文本吗？？？@PranayRana，[{“大图片”：“资产/图片/产品详细信息页面/Show1.png”}，{“大图片”：“资产/图片/产品详细信息页面/Show2.png”}，{“大图片”：“资产/图片/产品详细信息页面/Show3.png”}，{“小图片”：“资产/图像/产品详细信息网页/产品详细信息网页缩略图/bal1.png”{“小图像”：“资产/图像/产品详细信息网页/产品详细信息网页缩略图/bal2.png”}，{“小图像”：“资产/图像/产品详细信息网页/产品详细信息网页缩略图/bal3.png”]，{“选定的产品图像”：“资产/图像/模态屏幕/added.png”}]您收到的是响应，没有其他内容，对吗？因为现在它显示的是无效的jsoncheck这里的文本@PranayRana您检查了吗？this.CartdataService.i_cast_Product_Path.subscribe（（response:Images）=>{this.Images.big_Images=response.big_Images；}）；通过使用这段代码，我得到了未定义的输出，我需要从模型中提取所有单独的路径，并将其分配给局部变量进行显示it@PranayRana，正在寻找您的答复我的疑问是我只是在服务文件中调用api url，但我没有将此方法的get_Product_Path传递给my-cart.compont.ts t那么我如何才能在我的cart.component.tshi--{images}中得到响应呢？我得到了[object object]作为输出，我想得到从模型到绑定特定对象的所有图像路径images@PranayRana我已经实现了我系统中的所有功能。