Question 73854 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to send markdown over a REST API, and render it in the frontend (React) – Reactjs

So I’m trying to convert a markdown file and send it over a rest API, and render it in the frontend. The problem is that the newlines, and other things get lost while trying to convert it back.

How do I render it back in a way that the original markdown is preserved?

Is there a standard way of doing this?

Tried to convert markdown by json.stringify, sent it over the api, tried to convert it back to markdown but doesn’t work like original anymore.

Tags:

3

Answers


  1. 0

    You can add all the content in a <pre> tag as following

    <pre>
   This is 
   some code
   A json:
   {
     key: value
   }
</pre>

    In a <pre> tag, the text preserves both spaces and line breaks thus it will be displayed exactly as written in the HTML source code.

    Login or Signup to reply.
  3. 0

    You can either send the original file as a string, or if that is not an option, you can format the object with this function:

    const object = {a:[15,3457,15,"afbsv",[4,34,36],{
  l: "dsfvszd",
  qwe: 238475463,
  iuggbsf: ["AEfs",],
  afafwwa:{afafwafaw:{r:"4"}}
}]}

document.write(`<pre>${format(object)}</pre>`);

function format(object) {
  let result = "";
  processObject(object, 2);
  
  function processObject(object, depth, isObjectValue = false, trailingComma = "") {
    if (Array.isArray(object)) {
      result += `${isObjectValue ? "&nbsp;" : "<br>" + "&nbsp;".repeat(depth - 2)}[`;

      for (let i = 0; i < object.length; i++) {
        const element = object[i],
          trailingComma = i + 1 === object.length ? "" : ",";
        
        switch (typeof element) {
          case "object":
            processObject(element, depth + 2, false, trailingComma);
            break;
          case "string":
            result += `<br>${"&nbsp;".repeat(depth)}"${element}"${trailingComma}`;
            break;
          case "number":
            result += `<br>${"&nbsp;".repeat(depth) + element}${trailingComma}`;
            break;
        }
      }

      result += `<br>${"&nbsp;".repeat(depth - 2)}]${trailingComma}`;
    } else {
      result += `${isObjectValue ? "&nbsp;" : "<br>" + "&nbsp;".repeat(depth - 2)}{`;
      
      let keyIndex = 0,
        keyCount = Object.keys(object).length;
      for (key in object) {
        const value = object[key],
          trailingComma = ++keyIndex === keyCount ? "" : ",";
        switch (typeof value) {
          case "object":
            result += `<br>${"&nbsp;".repeat(depth)}"${key}":`;
            processObject(value, depth + 2, true, trailingComma);
            break;
          case "string":
            result += `<br>${"&nbsp;".repeat(depth)}"${key}": "${value}"${trailingComma}`;
            break;
          case "number":
            result += `<br>${"&nbsp;".repeat(depth)}"${key}": ${value}${trailingComma}`;
            break;
        }
      }

      result += `<br>${"&nbsp;".repeat(depth - 2)}}${trailingComma}`;
    }
  }
  
  return result;
}

    Just use format(objectGoesHere) and it will return a string that is formatted for HTML.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search