Angular, Converting JSON , Rxjs Opertaor, Typescript

Question

I received the following object (Survay) JSON format from server

/**************************************/

    {
        "id": 870,
        "title": "test survay ",
        "questions": [
            {
                "id": 871,
               
                "data": "question data 1"
               
            },
            {
                "id": 874,
                "data": "question data 2"
              
            },
            {
                "id": 877,
                "data": "question data 3"
                
            }
           
        ],
        "user": {
            "id": 788,
            "name": "mohamed",
            "answres": [
              
              {
                "data":"answere question 1"
              
              },
              {
                "data":"answere question 2"
              
              },
              {
                "data":"answere question 3"
              
              }
              
              ]
           
    
        }
 
   }

I used the following code

getSurvayByid(id: number) {
            const headers = new HttpHeaders({
                'Authorization': this.loadToken(),
                'Content-Type': 'application/json'
            });
            return this.http.get<Survay>(this.host + "/survay/" + id, { headers: headers })
                .pipe(map(resp => resp));
    
        }

I would like to change this format as it’s displayed:

My question:how I can get this format using the Rxjs operators ? (map, take, pipe...) and change the method getSurvayByid(id: number)

 {
        "id": 870,
        "title": "test survay ",
        "questions": [
            {
                "id": 871,
               
                "data": "question data 1",
                "answer":"answere question 1"
               
            },
            {
                "id": 874,
                "data": "question data 2",
                 "answer":"answere question 2"
              
            },
            {
                "id": 877,
                "data": "question data 3",
                 "answer":"answere question 3"
                
            }
           
        ],
        "user": {
            "id": 788,
            "name": "mohamed"
        
        }
    }

AC101 · Accepted Answer · 2020-06-29 16:02:04Z

1

Assuming the answers are in correct order, you can do it like this:

    return this.http.get<Survay>(this.host + "/survay/" + id, { headers: headers }).pipe(
       map((resp: Survay): Survay => {
          resp.questions.forEach((question, i) => question.answer = resp.answers.length == 0 ? '' : resp.answers[i].data);
          return resp;
       })
    );

I'm assuming the return type is also Survay. Please replace with correct return type.

edited Jun 29, 2020 at 16:02

answered Jun 25, 2020 at 17:37

AC101

9389 silver badges14 bronze badges

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

2 Comments

mohamed jouili Over a year ago

thank you for that answer but the type of return getSurvayByid(id: number ) it change from Observable<survay> a Observable<void> so to correct this trouble apply the forEach inside toPromise().then or subscribe() see the answer this below

AC101 Over a year ago

You should fix such type issues by properly using typescript rather than converting to Promises. RxJS is very powerful and using toPromise cripples it's potential. I'll update my answer with proper types.

mohamed jouili · Accepted Answer · 2020-06-27 18:21:12Z

0

getSurvayByid(id).toPromise().then(s => {


            s.questions.forEach((q,i)=>{this.answers=s.user.answres!
                if(this.answers.length==0){
                    q.answer="";
                }


          else {
                q.answer=this.answers[i].data;
            }
           
            
            })
          
           
        }

answered Jun 27, 2020 at 18:21

mohamed jouili

113 bronze badges

1 Comment

AC101 Over a year ago

While this solution works, I'll suggest to fix type errors by properly using typescript rather than using toPromise. With this solution you cannot use RxJS operators.

Collectives™ on Stack Overflow

Angular, Converting JSON , Rxjs Opertaor, Typescript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related