جاوااسکریپت - بازگرداندن یک لیست از اشیاء سفارشی از یک درخواست HTTP GET برای استفاده در یک برنامه Angular 2

من در تلاش هستم بفهمم چگونه بهطور صحیح یک لیست از اشیاء سفارشی را بازگردانده و محتوای آن را با استفاده از یک فایل HTML چاپ کنم.

این چیزی است که روش HTTP GET به نظر میرسد (برای سادهتر کردن موضوع، برخی موارد را حذف کردهام تا فقط مشکل را نشان دهم):

[HttpGet("/atr/testing")]
public List<CustomObject> GetCustomObjects()
{
    //MasterObject.CustomObjects returns a List of CustomObjects
    return MasterObject.CustomObjects();
}

فایل تایپاسکریپت من (به نام home.ts) عضو میشود و متد HttpGet را فراخوانی میکند - این شکلی است که کلاس Home دارد (تمام ایمپورتها و بخش @Component را حذف کردهام):

export class Home {
public selectedConfiguration: string = 'TESTVALUE';

constructor(private http: Http) {
    this.getConfigurations()
        .subscribe(res => {
            this.selectedConfiguration = res;
        });
}

getConfigurations() {
    console.log('Home:getConfigurations entered...');

    return this.http.get('atr/testing')
        .map((response) => {
            console.log(response);
            return response.json();
        });
}

}

همانطور که میبینید، سازنده متد 'getConfigurations' را فراخوانی میکند که متد HttpGet را فراخوانی میکند. بخشی که من را گیج میکند این است که چگونه باید از پاسخی که برگردانده میشود به درستی استفاده کنم؟ طبق درک من، پاسخها به صورت رشتههای JSON بازگردانده میشوند (به همین دلیل متغیر selectedConfiguration من در کلاس Home به جای یک لیست، یک مقدار رشتهای است). وقتی تلاش میکنم رشته 'selectedConfiguration' را با {{selectedConfiguration}} در فایل HTML خود چاپ کنم، این را دریافت میکنم:

[object Object],[object Object],[object Object],[object Object]

اگر از {{selectedConfiguration[0]}} در HTML خود استفاده کنم، فقط یکی دریافت میکنم: [object Object]

لیستی که توسط متد GET بازگردانده میشود، قرار است شامل ۴ CustomObject باشد و به نظر میرسد که پاسخ JSON حداقل این را داشته باشد. هر CustomObject دارای متغیرهایی مانند 'Name'، 'Date'، 'Time' و غیره است. من سعی کردهام دادهها را در HTML خود با استفاده از {{selectedConfiguration[0].Name}} چاپ کنم اما هیچ چیزی نمایش داده نمیشود. واقعاً مطمئن نیستم از اینجا چه کار کنم (یا اینکه آیا کار اشتباهی انجام میدهم) تا اطلاعات هر شیء را نمایش دهم.

پاسخ شماره ۱

پاسخ کوتاه

در مثال شما، شما در حال تلاش برای تبدیل یک شیء JSON به یک رشته هستید. برای اینکه این کار انجام شود، احتمالاً باید انجام دهید:

this.selectedConfiguration = JSON.stringify(res);

پاسخ طولانی

فرض کنیم کلاس CustomObject شما چیزی شبیه به این است:

public class CustomObject
{
    public string Name { get; set; }
    public DateTime Date { get; set; }
}

در کد انگولار خود، یک اینترفیس ایجاد کنید که آن را شبیهسازی کند. در ابزارهای توسعهدهنده بررسی کنید که حروف بزرگ و کوچک مطابقت دارند ("Name" و نه "name"):

export interface ICustomObject {
    Name: string;
    Date: Date;
}

از بررسی نوع TypeScript استفاده کنید و در واقع فهرست بازگشتی خود را بهعنوان آرایهای از اشیاء سفارشی خود بخوانید:

export class Home implements OnInit {
  public configurations: ICustomObject[];
  public selectedConfiguration: ICustomObject;

  constructor(private http: Http) {
    // move initialization code to ngOnInit. Don't forget the import and implements
  }

  ngOnInit() {
    this.getConfigurations()
        .subscribe((customList: ICustomObject[]) => {
            this.configurations = customList;
            // todo: determine the selected configuration
            this.selectedConfiguration = this.configurations[0];
        });
  }

  getConfigurations(): ICustomObject[] {
    return this.http.get('atr/testing')
        .map((response: Response) => {
            return <ICustomObject[]>response.json();
        });
}

پاسخ شماره ۲

آن را به صورت یک نتیجه json برگردانید:

[HttpGet("/atr/testing")]
public JsonResult GetCustomObjects()
{
    //MasterObject.CustomObjects returns a List of CustomObjects
    return Json(MasterObject.CustomObjects());
}