Parse html from JSON file

Question

I'm trying to get HTML tags to work in my json-file that i fetch via js.

So i want the return to somehow make the <strong> to work when render it on the page. How would i do that?

Sample of the json:

{
    "header_title": "<strong>test</strong>"
}

JS:

const newTranslations = await fetchTranslationsFor(
    newLocale,
);

async function fetchTranslationsFor(newLocale) {
    const response = await fetch('/lang/en.json');
    return await response.json();
}

To render it i do like so: pseudo.

element.innerText = json.myprop;

If you do something.innerHTML = newTranslations.header_title you should see it rendered (something is a variable containing the element you want to display it in). — Barmar
– Barmar, Commented Apr 26, 2022 at 17:23
What's the question here? You have a working solution based on the code you've provided — Samathingamajig
– Samathingamajig, Commented Apr 26, 2022 at 17:26
How i make the html tags in the json to display as html and not plain strings. — mathias5
– mathias5, Commented Apr 26, 2022 at 17:27
Where/when is your rendering code called? What does your html look like? What is element? What is json? Be sure to read How to create a minimal reproducible example. — mykaf
– mykaf, Commented Apr 26, 2022 at 17:28

Samathingamajig · Accepted Answer · 2022-04-26 17:29:19Z

1

Change innerText to innerHTML. When you use the text method, it escapes the html characters. Innerhtml renders the exact html.

element.innerHTML = json.myprop;

answered Apr 26, 2022 at 17:29

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Parse html from JSON file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related