Keep relation between nested http calls to JSON-API with Observables

Question

Problem: I'm using RXJS in an Angular 2 project. I get data from a JSON-API. The API delivers studies and questionnaires. In our model a study can "contain" one or more questionnaires. Studies have IDs and questionnaires have IDs. I want to list all questionnaires with their associated study's ID but I'm losing the "link" between study ID and and questionnaire object.

Example: Lets say Questionnaire IDs 4,5,6 are associated to study ID 1 and questionnaire IDs 7, 8 are associated to study ID 2.

The studies looks like this (GET: .../api/v1/studies/1):

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

The questionnaires looks like this (e.g.: 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}

I want to display all questionnaires in one list and for each questionnaire and show the study ID it's associated to like this:

{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"}

A GET call to .../api/v1/studies/1/questionnaires returns:

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

Code: I've got that far that I have all the components I need, I just can't figure out how to attach the study ID to the according questionnaire object.

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]

}

Outputs:

[1]

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

[2]

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

[3]

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

[4]

[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}

Pace · Accepted Answer · 2017-09-18 21:37:44Z

1

Could you do something like...

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

answered Sep 18, 2017 at 21:37

Pace

44.5k14 gold badges128 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Keep relation between nested http calls to JSON-API with Observables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related