Как сопоставить поля объекта ответа с новыми массивами в угловых? - PullRequest
Новая
       32

Как сопоставить поля объекта ответа с новыми массивами в угловых?

0 голосов
/ 16 апреля 2019

Я хочу отобразить ответ от сервиса на разные массивы. Мой ответ имеет тип 

{
  "success": true,
  "dataPoints": [{
    "count_id": 4,
    "avg_temperature": 2817,
    "startTime": "00:00:00",
    "endTime": "00:19:59.999"
  }, {
    "count_id": 4,
    "avg_temperature": 2814,
    "startTime": "00:59:59.997",
    "endTime": "01:19:59.996"
  }, {
    "count_id": 4,
    "avg_temperature": 2816,
    "startTime": "00:39:59.998",
    "endTime": "00:59:59.997"
  }, {
    "count_id": 4,
    "avg_temperature": 2825,
    "startTime": "02:19:59.993",
    "endTime": "02:39:59.992"
  }, {
    "count_id": 4,
    "avg_temperature": 2828,
    "startTime": "02:39:59.992",
    "endTime": "02:59:59.991"
  }, {
    "count_id": 4,
    "avg_temperature": 2832,
    "startTime": "02:59:59.991",
    "endTime": "03:19:59.99"
  }, {
    "count_id": 4,
    "avg_temperature": 2841,
    "startTime": "03:39:59.989",
    "endTime": "03:59:59.988"
  }, {
    "count_id": 4,
    "avg_temperature": 2816,
    "startTime": "01:39:59.995",
    "endTime": "01:59:59.994"
  }, {
    "count_id": 5,
    "avg_temperature": 2668,
    "startTime": "04:19:59.987",
    "endTime": "04:39:59.986"
  }, {
    "count_id": 3,
    "avg_temperature": 2711,
    "startTime": "05:19:59.984",
    "endTime": "05:39:59.983"
  }]

Я хочу создать массив startTime, endTime, avg_teuration. Я прочитал, что это может быть сделано путем создания интерфейса типа ответа и сопоставления полей. но я не уверен, как на карте. может кто-нибудь помочь? 

getHistoryData() {
  this.historyDataService.getHistoryData(this.payload)
    .subscribe(data => {this.responeData = data as IResponseData[];
      console.log(this.responeData);
  });

Ответы [ 5 ]

1 голос
/ 19 апреля 2019

Не вижу никаких трудностей.

Если у вас есть предполагаемые данные, они должны работать так, как вы ожидали. 

    const response = {
        "success": true,
        "dataPoints": [{
            "count_id": 4,
            "avg_temperature": 2817,
            "startTime": "00:00:00",
            "endTime": "00:19:59.999"
        }, {
            "count_id": 4,
            "avg_temperature": 2814,
            "startTime": "00:59:59.997",
            "endTime": "01:19:59.996"
        }, {
            "count_id": 4,
            "avg_temperature": 2816,
            "startTime": "00:39:59.998",
            "endTime": "00:59:59.997"
        }, {
            "count_id": 4,
            "avg_temperature": 2825,
            "startTime": "02:19:59.993",
            "endTime": "02:39:59.992"
        }, {
            "count_id": 4,
            "avg_temperature": 2828,
            "startTime": "02:39:59.992",
            "endTime": "02:59:59.991"
        }, {
            "count_id": 4,
            "avg_temperature": 2832,
            "startTime": "02:59:59.991",
            "endTime": "03:19:59.99"
        }, {
            "count_id": 4,
            "avg_temperature": 2841,
            "startTime": "03:39:59.989",
            "endTime": "03:59:59.988"
        }, {
            "count_id": 4,
            "avg_temperature": 2816,
            "startTime": "01:39:59.995",
            "endTime": "01:59:59.994"
        }, {
            "count_id": 5,
            "avg_temperature": 2668,
            "startTime": "04:19:59.987",
            "endTime": "04:39:59.986"
        }, {
            "count_id": 3,
            "avg_temperature": 2711,
            "startTime": "05:19:59.984",
            "endTime": "05:39:59.983"
        }]
    };


startTime = [];
avg_temperature = [];
endTime = [];

getHistoryData() {
        this.startTime = [];
        this.avg_temperature = [];
        this.endTime = [];
        this.historyDataService
                .getHistoryData(this.payload)
                .subscribe(
                    (data: any) => 
                {
                    const responeData: any = data.dataPoints;
                    if(responeData == null){
                        return; // you don't have the expected data
                    }
                    startTime = responeData.map(e => e.startTime);
                    endTime = responeData.map(e => e.endTime);
                    avg_temperature = responeData.map(e => e.avg_temperature);
                }
        );
0 голосов
/ 19 апреля 2019

Посмотрите, работает ли это для вас. 

const data = {
  "success": true,
  "dataPoints": [{
    "count_id": 4,
    "avg_temperature": 2817,
    "startTime": "00:00:00",
    "endTime": "00:19:59.999"
  }, {
    "count_id": 4,
    "avg_temperature": 2814,
    "startTime": "00:59:59.997",
    "endTime": "01:19:59.996"
  }, {
    "count_id": 4,
    "avg_temperature": 2816,
    "startTime": "00:39:59.998",
    "endTime": "00:59:59.997"
  }, {
    "count_id": 4,
    "avg_temperature": 2825,
    "startTime": "02:19:59.993",
    "endTime": "02:39:59.992"
  }, {
    "count_id": 4,
    "avg_temperature": 2828,
    "startTime": "02:39:59.992",
    "endTime": "02:59:59.991"
  }, {
    "count_id": 4,
    "avg_temperature": 2832,
    "startTime": "02:59:59.991",
    "endTime": "03:19:59.99"
  }, {
    "count_id": 4,
    "avg_temperature": 2841,
    "startTime": "03:39:59.989",
    "endTime": "03:59:59.988"
  }, {
    "count_id": 4,
    "avg_temperature": 2816,
    "startTime": "01:39:59.995",
    "endTime": "01:59:59.994"
  }, {
    "count_id": 5,
    "avg_temperature": 2668,
    "startTime": "04:19:59.987",
    "endTime": "04:39:59.986"
  }, {
    "count_id": 3,
    "avg_temperature": 2711,
    "startTime": "05:19:59.984",
    "endTime": "05:39:59.983"
  }]
};

const temp = data.dataPoints.map(obj => obj.avg_temperature);
const startTime = data.dataPoints.map(obj => obj.startTime);
const endTime = data.dataPoints.map(obj => obj.endTime);

console.log(temp);
console.log(startTime);
console.log(endTime);
0 голосов
/ 19 апреля 2019

Вы можете уменьшить отклик до трех отдельных массивов, как это действительно просто: 

// Helper function to map the object response to three arrays
mapResponse(response): DataVM {
   return reponse && response.dataPoints ? response.dataPoints.reduce((total, curr) => {
      return {
         ...total,
         avgTemp: [...total.avgTemp, curr.avg_temperature],
         endTime: [...total.startTime, curr.startTime],
         startTime: [...total.endTime, curr.endTime]
      }
    }, {avgTemp: [], startTime: [], endTime: []}) : null;
}

// Map the response in pipe (Rx 5.5+) or .map (older RxJS versions)
getHistoryData() {
  this.historyDataService.getHistoryData(this.payload)
      .pipe(map(this.mapResponse))
      .subscribe(data => {
           console.log(data);
  });

Вы также можете создать интерфейс для отображения вашей модели вида, например: 

export interface DataVM{
   avgTemp: number[],
   endTime: string[],
   startTime: string[]
}

Удачи!

0 голосов
/ 19 апреля 2019

Вы, похоже, ищете 

getHistoryData() {
    this.historyDataService.getHistoryData(this.payload).subscribe(response => {
        const {dataPoints} = response;
        const result = {
            startTimes: dataPoints.map(p => p.startTime),
            endTimes: dataPoints.map(p => p.endTime),
            avgTemperatures: dataPoints.map(p => p.avg_temperature)
        };
        console.log(result);
    });
}
0 голосов
/ 16 апреля 2019

Объявить 3 массива для хранения startime, endtime и avg_tength; 

startTime = [];
endTime = [];
avg_temperature = [];
getHistoryData() {
    this.historyDataService.getHistoryData(this.payload)
        .subscribe(data => {
        this.responeData = data.dataPoints as IResponseData[];
        this.responseData.forEach(x =>{
            this.startTime.push(x.startTime),
            this.endTime.push(x.endtime),
            this.avg_temperature.push(x.avg_temperature)}
        );
    });
}
...