使用Observables

时间:2017-09-18 13:03:57

标签: javascript angular typescript rxjs json-api

问题:我在Angular 2项目中使用RXJS。我从JSON-API获取数据。 API提供研究和问卷调查。在我们的模型中,研究可以“包含”一个或多个问卷。研究有ID和问卷有ID。我想列出所有问卷及其相关研究的ID,但我正在失去研究ID和问卷对象之间的“链接”。

示例:让我们说问卷ID 4,5,6与研究ID 1相关联,问卷ID 7,8与研究ID 2相关联。

研究看起来像这样(GET:.../api/v1/studies/1):

{type: "study", id: "1", attributes: Object}
{type: "study", id: "2", attributes: Object}

问卷看起来像这样(例如:GET:.../api/v1/questionnaires/4):

{type: "questionnaires", id: "4", attributes: Object}
{type: "questionnaires", id: "5", attributes: Object}
{type: "questionnaires", id: "6", attributes: Object}
{type: "questionnaires", id: "7", attributes: Object}
{type: "questionnaires", id: "8", attributes: Object}

我想在一个列表和每个问卷中显示所有问卷,并显示与之相关的研究ID:

{type: "questionnaires", id: "4", attributes: Object, associatedStudyId: "1"}
{type: "questionnaires", id: "5", attributes: Object, associatedStudyId: "1"}
{type: "questionnaires", id: "6", attributes: Object, associatedStudyId: "1"}
{type: "questionnaires", id: "7", attributes: Object, associatedStudyId: "2"}
{type: "questionnaires", id: "8", attributes: Object, associatedStudyId: "2"}

.../api/v1/studies/1/questionnaires的GET调用返回:

[{"type": "questionnaires", "id": "4"},{"type": "questionnaires","id": "5"}]

代码:我已经拥有了我所需要的所有组件,我只是无法弄清楚如何将研究ID附加到相应的问卷对象。

getQuestionnaires(studyIds) {
console.log(studyIds); // see output [1]
this.editableQuestionnaires = [];

let studyIdsObs = Rx.Observable.from(studyIds);

let questShortStream = studyIdsObs.flatMap((id) => {
  return this.apiService.getQuestionnairesOfStudy(id)
});

questShortStream.subscribe(console.log);

let questsAndStudyId = Rx.Observable.zip(studyIdsObs, questShortStream,
  (id, quests) => {
    return {
      studyId: id,
      questionnaires: quests
    }
  })

questsAndStudyId.subscribe(console.log) // see output [2]

let studyIdAndQuestIds = questsAndStudyId.map((obj) => {
  let questIds = [];
  for (let i = 0; i < obj.questionnaires.length; i++) {
    questIds.push(obj.questionnaires[i].id);
  }
  return {
    studyId: obj.studyId,
    questionnaireIds: questIds
  }
});

studyIdAndQuestIds.subscribe(console.log); // see output [3]

let questionnaireIdsObs = studyIdAndQuestIds.flatMap(obj => {
  return Rx.Observable.from(obj.questionnaireIds);
})

questionnaireIdsObs.subscribe(console.log) // see output[4]

let questionnairesObs = questionnaireIdsObs.flatMap(id => this.apiService.getEditableQuestionnaire(id))

questionnairesObs.subscribe(console.log) // see output [5]

}

输出:

[1]

[ "1", "2", "3" ]

[2]

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

[3]

Object { studyId: "1", questionnaires: Array[3] }
Object { studyId: "2", questionnaires: Array[2] }

[4]

4
5
6
7
8

[5]

Object { type: "questionnaires", id: "4", attributes: Object}
Object { type: "questionnaires", id: "5", attributes: Object}   
Object { type: "questionnaires", id: "6", attributes: Object}
Object { type: "questionnaires", id: "7", attributes: Object}
Object { type: "questionnaires", id: "8", attributes: Object}

1 个答案:

答案 0 :(得分:1)

你能做点像......

studyIds.forkJoin(
  studyIds.map(studyId => 
    service.getQuestionaires(studyId).map(questionaires => 
      questionaires.map(questionaire => {
        questionaire.associatedStudyId = studyId;
        return questionaire;
      })
    )
  )
);