React cannot parse string object-CodePudding

I have object of type string and want to parse it using JSON.parse().

console.log(post.description);
console.log("Type:- ", typeof(post.description));

String Object:-

{"blocks":[{"key":"1i9ik","text":"Issue Title","type":"header-three","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"4nluf","text":"Hi,","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"evi0t","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"5s8vp","text":"Lorem Ipsum is simply dummy text of the printing and typesetting industry.","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":11,"style":"BOLD"}],"entityRanges":[],"data":{}},{"key":"fkbca","text":"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"3dc6a","text":"when an unknown printer took a galley of type and scrambled it to make a type specimen book.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"8rfom","text":"","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"es2ha","text":"one","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"aeon1","text":"Two","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"ei5sb","text":"Three","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"bo9vp","text":"Urgent","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":0,"length":6,"style":"BOLD"},{"offset":0,"length":6,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}

Type:-  string

When I try to parse it gives the following error:-

console.log(JSON.parse(post.description));

Uncaught SyntaxError: Unexpected token u in JSON at position 0

Why do I want to parse the string object? I want to use the parsed output in the draft js editor component to display the Rich Text stored in a database.

Example Code to display Rich Text in Draft Js Editor Component.

const contentState = convertFromRaw(JSON.parse(description));
const editorState = EditorState.createWithContent(contentState);


<Editor editorState={editorState} readOnly={true} />

Sandobox Code works fine.

Code on local machine does not work:-

import { Editor, EditorState, convertFromRaw } from "draft-js";

const PostPage = () => {

  const dispatch = useDispatch();
  const params = useParams();
  const { postId } = useParams();


  const { post } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getpost(postId));
  }, [dispatch]);

  console.log(post?.description);
  console.log("Description type:- ", typeof post?.description);

  const contentState = convertFromRaw(JSON.parse(post.description));

  console.log(contentState);
  console.log("Content state type:-  ", typeof contentState);

  const editorState = EditorState.createWithContent(contentState);

  console.log(editorState);
  console.log("Content state type:-  ", typeof editorState);

  return (
    <>
      <div className="post-content-description">
        <Editor editorState={editorState} readOnly={true} />
      </div>
    </>
  );
};

export default PostPage;

It gives error Uncaught SyntaxError: Unexpected token u in JSON at position 0

Why is the post.description undefined? what can be done about this?

CodePudding user response：

You are trying to parse undefined since post is not defined when your component is loaded

Unexpected token u in JSON at position 0 is the result of JSON.parse(undefined)

Try to change in this way

import { Editor, EditorState, convertFromRaw } from "draft-js";

const PostPage = () => {

  const dispatch = useDispatch();
  const params = useParams();
  const { postId } = useParams();
  const [editorState, setEditorState] = useState(null)

  const { post } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(getpost(postId));
  }, []);

   useEffect(() => {
    if(!post) return;
      console.log(post.description);
      console.log("Description type:- ", typeof post?.description);

      const contentState = convertFromRaw(JSON.parse(post.description));

  console.log(contentState);
  console.log("Content state type:-  ", typeof contentState);

  setEditorState(EditorState.createWithContent(contentState));

  
  }, [post]);
 

  return editorState && (
    <>
      <div className="post-content-description">
        <Editor editorState={editorState} readOnly={true} />
      </div>
    </>
  );
};

export default PostPage;

CodePudding user response：

In the sandbox you posted, you escaped the ' inside "[...] has been the industry's standard [...]" (e.g: industry\'s standard).

In the text you posted in the question, that single quote is not escaped.

If you use

const post = {
    subject: "Some Subject",
    description: '/* text with unescaped single quote */'
}

..., the contents of post.description will not be a valid JSON string.

You either escape the single quote (as in the sandbox), or you use backticks for description:

const post = {
  subject: "Some subject",
  description: `/* text with unescaped single quote */`
}

CodePudding user response：

Try to stringify the object first and then parse it.

JSON.parse(JSON.stringify(post.description))