Angular typescript将json数据从url加载到数组中_Angular_Typescript

Angular typescript将json数据从url加载到数组中

angular typescript

Angular typescript将json数据从url加载到数组中,angular,typescript,Angular,Typescript,我有来自URL的json数据。数据如下所示： [ {"id":1,"symbol":"SP-500","date":"1927-12-30T07:00:00.000+00:00","open":17.66,"high":17.66,"low":17.66,"close":17.66,"volume&quo

我有来自URL的json数据。数据如下所示：

[
  {"id":1,"symbol":"SP-500","date":"1927-12-30T07:00:00.000+00:00","open":17.66,"high":17.66,"low":17.66,"close":17.66,"volume":0},
  {"id":2,"symbol":"SP-500","date":"1928-01-03T07:00:00.000+00:00","open":17.76,"high":17.76,"low":17.76,"close":17.76,"volume":0}
]

  getQuotesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

export class QuoteListComponent implements OnInit {
  quotes: Observable<Quote[]>;

[1927-12-30,1928-01-03]
[17.66,17.76]

检索它的代码位于quote.service.ts中，如下所示：

[
  {"id":1,"symbol":"SP-500","date":"1927-12-30T07:00:00.000+00:00","open":17.66,"high":17.66,"low":17.66,"close":17.66,"volume":0},
  {"id":2,"symbol":"SP-500","date":"1928-01-03T07:00:00.000+00:00","open":17.76,"high":17.76,"low":17.76,"close":17.76,"volume":0}
]

  getQuotesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

export class QuoteListComponent implements OnInit {
  quotes: Observable<Quote[]>;

[1927-12-30,1928-01-03]
[17.66,17.76]

这张桌子看起来不错，所有的数据都在那里

现在我想为每个值将其加载到单独的数组中，如下所示：

[
  {"id":1,"symbol":"SP-500","date":"1927-12-30T07:00:00.000+00:00","open":17.66,"high":17.66,"low":17.66,"close":17.66,"volume":0},
  {"id":2,"symbol":"SP-500","date":"1928-01-03T07:00:00.000+00:00","open":17.76,"high":17.76,"low":17.76,"close":17.76,"volume":0}
]

  getQuotesList(): Observable<any> {
    return this.http.get(`${this.baseUrl}`);
  }

export class QuoteListComponent implements OnInit {
  quotes: Observable<Quote[]>;

[1927-12-30,1928-01-03]
[17.66,17.76]

等等

然后我想让这些数组可用于javascript图表程序，该程序将绘制数据。该绘图代码要求每个值都有一个单独的数组

我想如果我把quote.service.ts修改成

  getQuotesList(): Observable<any> {
    let quotes = this.http.get(`${this.baseUrl}`);
    let opens = quotes.map(theOpen => open);
    console.log("opens.length=" + opens.length);
    opens.forEach(function(item,index,array) {
        console.log(item,index);
        })
    return quotes;
  }

然后我试着：

getQuotesList() {
  let quotes = this.http.get<Quote[]>(`${this.baseUrl}`);
  let opens = quotes.pipe(map(theOpen => open));
  alert(opens[0]);
  return quotes;
}

但错误是

ERROR in quote.service.ts:67:6 - error TS1005: ',' expected.

67     )}
        ~
quote.service.ts:68:5 - error TS1005: ',' expected.

68     return quotes;
       ~~~~~~


    ERROR in quote.service.ts:64:23 - error TS2339: Property 'map' does not exist on type 'Object'.

    64         let col = arr.map(ele => ele[el]);

你认为我已经做了足够的尝试了吗-( 我不熟悉角形字体，希望有人能指导我

编辑：我设法找到了将代码移植到linux服务器的方法。现在，通过在浏览器中输入以下内容，您可以访问后端以查看传入的实际数据：167.172.141.34:8080/springboot crud rest/api/v1/quotes

您可以使用映射

var-arr=[
{“id”：1，“符号”：“SP-500”，“日期”：“1927-12-30T07:00:00.000+00:00”，“开放”：17.66，“高”：17.66，“低”：17.66，“闭”：17.66，“卷”：0}，
{“id”：2，“符号”：“SP-500”，“日期”：“1928-01-03T07:00:00.000+00:00”，“开放”：17.76，“高”：17.76，“低”：17.76，“关闭”：17.76，“音量”：0}
]
Object.key（arr[0]）.forEach（el=>{
设arrray=（el=“date”）？arr.map（ele=>ele[el]。子字符串（0,10））：arr.map（ele=>ele[el]）；
console.log（el'，：'，arrray）；
//用你的逻辑
})

我通过首先运行以下命令，最终无误地编译了它：

npm install --save rxjs-compat

然后添加此导入：

import { map } from 'rxjs/operators';

然后添加以下代码以获得一个“打开”值数组：

getQuotesList（）：可观察{
让quotes=this.http.get（`${this.baseUrl}`）；
让opens=quotes.pipe（map（theOpen=>open））；
console.log（打开）；
返回报价；
}

不幸的是，console.log（opens）没有输出任何内容，但这是另一个问题。

这个问题有两个部分。一个是如何将JSON数据转换为所需的数组格式，另一个问题是如何使用封装您试图访问的实际数据的

可观察对象
对于第一部分，以下是应转换数据格式的示例代码：

const引号=[
{“id”：1，“符号”：“SP-500”，“日期”：“1927-12-30T07:00:00.000+00:00”，“开放”：17.66，“高”：17.66，“低”：17.66，“闭”：17.66，“卷”：0}，
{“id”：2，“符号”：“SP-500”，“日期”：“1928-01-03T07:00:00.000+00:00”，“开放”：17.76，“高”：17.76，“低”：17.76，“关闭”：17.76，“音量”：0}
] 
const chartData=Object.assign（{}，
…Object.key（引号[0]）.map（key=>({
[key]：quotes.map（quote=>quote[key]）
})))
console.log（chartData）
订阅方法是正确的，但是您没有以正确的方式处理生成的数组。在订阅回调中，您得到了一个实际的数组，因此您可以使用在尝试中对观察者对象无效的原始.map
方法
getQuotesList（）：可观察{
让quotes=this.http.get（`${this.baseUrl}`）；
quotes.subscribe（（arr:Quote[]）=>{
const opens=arr.map（quote=>quote.open）
控制台日志（打开）；//[17.66,17.76]
const dates=arr.map（quote=>quote.date.split（“T”）[0]）
控制台日志（日期）；//[1927-12-301928-01-03]
)}
返回报价；
}
这段代码闻起来很难闻。。。
我认为名为“getQuotesList”的QuoteService方法应该只有一个目的：像一开始那样返回一个Observable
我认为您在组件中需要做的是存储quote-observable，并使用switchMap操作符创建一个新的observable（其中包含reduce逻辑）
您应该查看此stackblitz以了解可能的解决方案：
干杯！
您在getQuotesList（）
中有错误
import{of，Observable}来自'rxjs'；
从“rxjs/operators”导入{map}；
常数数据=[
{“id”：1，“符号”：“SP-500”，“日期”：“1927-12-30T07:00:00.000+00:00”，“开放”：17.66，“高”：17.66，“低”：17.66，“闭”：17.66，“卷”：0}，
{“id”：2，“符号”：“SP-500”，“日期”：“1928-01-03T07:00:00.000+00:00”，“开放”：17.76，“高”：17.76，“低”：17.76，“关闭”：17.76，“音量”：0}
];
函数getQuotesList（）：可观察{
//将（数据）替换为this.http.get（this.baseUrl）
返回（数据）。管道(
地图（（引号）=>{
返回报价。减少（（acc，curr）=>{
acc[0].push（curr.date.substr（0,10））；
acc[1]。推送（当前打开）；
返回acc；
}, [[], []]);
}),
)
}
getQuotesList（）.subscribe（x=>console.log（x））；


更新：
这是您的全方位服务：
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable, Subject, of } from "rxjs";
import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/operator/filter";
import { Quote } from "./quote";

@Injectable({
  providedIn: "root"
})
export class QuoteService {
  private baseUrl = "http://localhost:8080/springboot-crud-rest/api/v1/quotes";

  constructor(private http: HttpClient) {}

  getQuote(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  createQuote(quote: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}`, quote);
  }

  updateQuote(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteQuote(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: "text" });
  }

  //getQuotesList(): Observable<any> {
  //  return this.http.get(`${this.baseUrl}`);
  //}

  getQuotesList(): Observable<[string[], string[]]> {
    // replace of(data) to this.http.get(this.baseUrl)
    return this.http.get<Quote[]>(this.baseUrl).pipe(
      map(quotes => {
        return quotes.reduce(
          (acc, curr) => {
            acc[0].push(curr.date.substr(0, 10));
            acc[1].push(curr.open);
            return acc;
          },
          [[], []]
        );
      })
    );
  }
}

从“@angular/core”导入{Injectable}；
从“@angular/common/http”导入{HttpClient}；
从“rxjs”中导入{可观察，主题，of}；
从“rxjs/operators”导入{map}；
导入“rxjs/add/operator/map”；
导入“rxjs/operator/filter”；
从“/Quote”导入{Quote}；
@注射的({
提供于：“根”
})
导出类报价服务{
专用baseUrl=”http://localhost:8080/springboot-crud rest/api/v1/quotes”；
构造函数（私有http:HttpClient）{}
getQuote（id:number）：可观察{
返回this.http.get（`${this.baseUrl}/${id}`）；
}
createQuote（quote:Object）：可观察{
返回this.http.post（`this.baseUrl}`，引号）；
}
updateNote（id:number，value:any）：可观察{
返回this.http.put（`${this.baseUrl}/${id}`，值）；
}
deleteQuote（id:number）：可观察{
返回this.http.delete（`this.baseUrl}/${id}`，{responseType:'text}）；
}
//getQuotesList（）：可观察{
//返回this.http.get（`${this.baseUrl}`）；
//}
getQuotesList（）：可观察{
//将（数据）替换为this.http.get（this.baseUrl）
返回this.http.get（this.baseUrl）.pipe(
地图（引号=>{
返回quotes.reduce(
（会计科目，当前）=>{
acc[0].push（curr.date.substr（0,10））；
acc[1]。推送（当前打开）；
返回acc；
},
[[], []]
);
})
);
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable, Subject, of } from "rxjs";
import { map } from 'rxjs/operators';
import "rxjs/add/operator/map";
import "rxjs/operator/filter";
import { Quote } from "./quote";

@Injectable({
  providedIn: "root"
})
export class QuoteService {
  private baseUrl = "http://localhost:8080/springboot-crud-rest/api/v1/quotes";

  constructor(private http: HttpClient) {}

  getQuote(id: number): Observable<any> {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  createQuote(quote: Object): Observable<Object> {
    return this.http.post(`${this.baseUrl}`, quote);
  }

  updateQuote(id: number, value: any): Observable<Object> {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteQuote(id: number): Observable<any> {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: "text" });
  }

  //getQuotesList(): Observable<any> {
  //  return this.http.get(`${this.baseUrl}`);
  //}

  getQuotesList(): Observable<[string[], string[]]> {
    // replace of(data) to this.http.get(this.baseUrl)
    return this.http.get<Quote[]>(this.baseUrl).pipe(
      map(quotes => {
        return quotes.reduce(
          (acc, curr) => {
            acc[0].push(curr.date.substr(0, 10));
            acc[1].push(curr.open);
            return acc;
          },
          [[], []]
        );
      })
    );
  }
}