React.js：将字符串转换为对象

Question

I am using react to fetch Json data from an API, however, the API includes a key that has an object formatted as a String. See example below:

 user_category:"employee",
 user_info:"{"user_id":"55","user_age":"27","user_company":"tesla"}"

To access the user-category, I simply use a header with an accessor , and the value displays on the table just fine, however I am having difficulties accessing the user_info key String using its keys and values using something like this:

 {
     Header: "User Id",
     accessor: "user_info.user_id"
   },
   {
     Header: "User Age",
     accessor: "user_info.user_age"
   },
   {
     Header: "User Company",
     accessor: "user_info.user_company"
   }

Answer 1

It's odd that the server is double-encoding the object to JSON like that (encoding the inner one and then encoding the whole thing).

Ideally you'd have the server-side fixed, because what they're doing doesn't make sense, as JSON supports nested objects just fine.

If you have to solve the problem on the client, you'd use JSON.parse to turn the string into an object.

const atts = {
  user_category: "employee",
  user_info: "{"user_id":"55","user_age":"27","user_company":"tesla"}"
};

const userInfo = JSON.parse(atts.user_info);