The value of the JSON array displays undefiend after converting it into string

Question

Part of my service.spec.ts is below:

service.spec.ts

it('should mock the http requests', inject([Service, MockBackend], (service, mockBackend) => {
    let result:any;
    mockBackend.connections.subscribe((connection) => {
        connection.mockRespond(new Response(new ResponseOptions({

           body: JSON.stringify(mockResponse),

        })));
    });
    service.getGoogle().subscribe((heroes: any) => {
        result = heroes;
        console.log('1', result);
        console.log('2', result[0]); //Logs shows this as undefined!!I need to print here "aditya"
               });     
}))

The value of mockResponse is as follows:

const mockResponse = [{"name":"aditya"},{"name":"xyz"}];

Logs:

LOG: 'Inside service'
LOG: '1', Response{_body: '[{"name":"aditya"},{"name":"xyz"}]', status: null, ok: false, statusText: null, headers: null, type: null, url: null}
LOG: '2', undefined
  Other method
    √ should mock the http requests

Note: '[{"name":"aditya"},{"name":"xyz"}]' This is a string! As I have converted it into JSON.stringify(mockResponse), If I would have not used this then it displays as Object: [....], Object: [....].

I am following this https://angular.io/api/http/ResponseOptions Here it is using `body` but when in the Response its `_body`.Does it affect? — Aditya, Jul 29 '17 at 21:19
According to (1) `result` is not an array, but a response object, which has a `_body`-property, which has a JSON string. So (2) should be: `JSON.parseJSON(result._body)[0]` — Hendrik Brummermann, Jul 29 '17 at 22:31

Mark · Accepted Answer · 2017-07-29T21:54:23.040

2

Not sure what your question is. The code seems to be doing what you are asking.

This:

JSON.stringify(mockResponse),

Turns an array into a string. You are then making that string the value of an object with a key body. And returning it.

Your subscribe method is receiving the whole Response object although from the variable name, we assume you were expecting a Heroes object. (Typescript will catch that kind of error if you set the type to something other than any)

Now when you log result, it logs the Result object you just received. Which includes the body holding your stringified object.

result[0] is empty because result isn't an array.

I think you want:

service.getGoogle().subscribe((result: any) => {
    heroes = JSON.parse(result._body)

    // heroes is now an array you started with
    // heroes[0] == {"name":"aditya"}
    // heroes[1] == {"name":"xyz"}

edited Jul 29 '17 at 21:54

answered Jul 29 '17 at 21:18

Mark

90,562
7
108
148

Actually, I am passing hard coded response here, which is JSON.So I have created a JSON array.After creating it I pass it as a response which serves my mock request.And then want to display this response in the console and test this. – Aditya Jul 29 '17 at 21:25
You are displaying your response in the console: `Response{_body: '[{"name":"aditya"},{"name":"xyz"}]', status: null, ok: false, statusText: null, headers: null, type: null, url: null}` – Mark Jul 29 '17 at 21:28
I want to display "name":"aditya" as the first element of the array, How would I do this? – Aditya Jul 29 '17 at 21:34
Did you try parsing the JSON with `JSON.parse(result._body)`? – Mark Jul 29 '17 at 21:55
yes, it displays `[Object{name: 'aditya'}, Object{name: 'xyz'}]` – Aditya Jul 29 '17 at 23:18
It is a JSON array now.I tested it with `expect(data[0]).toEqual({"name":"aditya"})`, it passed! – Aditya Jul 29 '17 at 23:25

The value of the JSON array displays undefiend after converting it into string

1 Answers1