Карта Observable из JSON в массив

Я получаю данные JSON из API, и мне нужно сопоставить их с отдельными массивами.

Данные принимаются в таком формате:

[
  {"MONTH":9,"YEAR":2015,"SUMAMT":0},
  {"MONTH":10,"YEAR":2015,"SUMAMT":11446.5},
  {"MONTH":11,"YEAR":2015,"SUMAMT":539252}
]

и мне нужно преобразовать его в

Array1 = [Sep-2015,Oct-2015,Nov-2015]
Array2 = [0,11446.5,539252]

Это код, который я пытаюсь реализовать, но я не уверен, как его реализовать.

Это служба, получающая данные:


    getSalesTrend(): Observable < any > {
      return this.http.get<any>(`${this.apiPath}/salesTrend`)
        .pipe(
          map(data => {
            this.date = new Date(data.YEAR, data.MONTH, 1);
            return this.date.formatDate(this.date, "MMM-YYYY");
          })
        )
    }

Это компонент, подписывающийся на данные:

salesTrendData: any[]
ngOnInit() {
    this.adminService.getSalesTrend()
      .subscribe(salesTrendData => {
        this.salesTrendData = salesTrendData
        console.info(this.salesTrendData);
      })
  }

console.info should give me: Array1 and Array2

Любая помощь будет принята с благодарностью. Я новичок на этом форуме, пожалуйста, дайте мне знать, если вам нужна дополнительная информация, и заранее спасибо :)

Вы не можете вернуть два значения из функции: массив1 и массив2 должны быть заключены в массив ([массив1, массив2]) или объект{массив1: [...], массив2: [...]}, или это должно быть два элемента в потоке с использованием rxjs.

— 30.04.2019 10:40

angular typescript

30.04.2019 10:32

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

467

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Во-первых, вам понадобится объект для сопоставления значений месяца. Затем вы используете Массив.карта() для достижения желаемых результатов, как показано в демонстрации ниже.

const months = {
   '1': 'Jan',
    '2':'Feb',
    '3':'Mar',
    '4':'Apr',
    '5':'May',
    '6':'Jun',
    '7':'Jul',
    '8':'Aug',
    '9':'Sep',
    '10':'Oct',
    '11':'Nov',
    '13':'Dec'
}

const data = [{"MONTH":9,"YEAR":2015,"SUMAMT":0}, {"MONTH":10,"YEAR":2015,"SUMAMT":11446.5},{"MONTH":11,"YEAR":2015,"SUMAMT":539252}];

const Array1 = data.map(obj => {
  const month = months[obj.MONTH]
  return `${month}-${obj.YEAR}`;
})

const Array2 = data.map(obj => obj.SUMAMT)
console.info(Array1);
console.info(Array2);

Вот как мы можем интегрировать это в ваш код. После проведения маппинга мы все равно сохраняем их оба в объект, а затем возвращаем объект вашему компоненту.

getSalesTrend(): Observable<any> {
  return this.http.get<any>(`${this.apiPath}/salesTrend`)
    .pipe(
      map(data => {
        const months = {'1': 'Jan', '2':'Feb', '3':'Mar', '4':'Apr', '5':'May', '6':'Jun', '7':'Jul', '8':'Aug', '9':'Sep', '10':'Oct', '11':'Nov', '13':'Dec'};
        const Array1 = data.map(obj => {
          const month = months[obj.MONTH]
          return `${month}-${obj.YEAR}`;
        });
        const Array2 = data.map(obj => obj.SUMAMT);
        return {Array1, Array2};
      })
    )
  }
}

Хорошее и чистое решение, мне нравится!

— 30.04.2019 10:44

Большое спасибо за ссылку и прекрасное объяснение, это сработало отлично! Ты жжешь!

— 30.04.2019 14:00

30.04.2019 10:42