React Fetch post api return response [object Object]? [duplicate]

Question

I am working on react. I have an api that is using POST method, body contains sessionId and returns response data in json. In postman, it's working fine. But in React, its returning [object Object]. Method is post, but api is getting the data. Please let me know what's the issue why console.log("json " + json) is giving [object Object]

const App = () => {
  const [userInfo, setuserInfo] = useState(‘’);
  useEffect(() => {
    const url = 'https://test.com/v1/getSessionInfoById';
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      body: JSON.stringify({ sessionId: 'cf209972-51d6-37d5-b9e9' })
    };
    const fetchData = async () => {
      try {
        const response = await fetch(url, requestOptions);
        const json = await response.json();
        console.log("json " + json);
        setuserInfo(json);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchData();
  }, []);

  return (
    <>userInfo</>
  )
};

export default App;

Postman response is

{
    "sessionId": "cf209972-51d6-37d5-b9e9",
    "userId": "114",
    "expirationDate": "2023-04-21",
    "keyPropertiesList": [
        {
            "id": 266277,
            "properties": {
                "user": {
                    "firstName": "test",
                    "lastName": "A",
                    "fullName": "test A"
                },

                "userDetail": {
                    "phoneNo": "666-777-9999",
                    "email": "[email protected]"
                },
                "locationID": "78"
            }
        }
    ]
}

You've a typo, console.log("json " + json); will implicitly call .toString on the object and [object Object] is the string representation of Javascript objects. You likely meant something more like console.log("json", json);. — Drew Reese
– Drew Reese, Commented May 17, 2023 at 6:31

sachin · Accepted Answer · 2023-05-17 06:20:34Z

1

The api is giving the correct answer however, you are wrongly printing it.

const js = { name : "sachin" }
console.log("json" + js )

look at this code once, I wrote the right json bt still it says [Object Object] because I'm printing in the console with + operator as : console.log("json" + js )
Because you are trying to concatenate a string with an object.

however replacing + with , will give the correct answer.

const js = { name : "sachin" }
console.log("json" , js )

Like this ( because you are not concatenating here, you are just printing those values )

answered May 17, 2023 at 6:20

sachin

1,1371 gold badge9 silver badges11 bronze badges

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

Comments

madflow · Accepted Answer · 2023-05-17 06:21:12Z

1

response.json returns the parsed Json as an "Object". You are concatenating this object with a string:

console.log("json " + json);

Hence you will get the String representation. You probably want:

console.log("json ", json);

answered May 17, 2023 at 6:21

madflow

8,6933 gold badges45 silver badges61 bronze badges

2 Comments

TestUser Over a year ago

thanks a lot. you all are correct. how to store this value in reducer so that it will be available everywhere.

madflow Over a year ago

@TestUser this should be a new question on SO when it is not already existing.

Collectives™ on Stack Overflow

React Fetch post api return response [object Object]? [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related