[Solved] How to style a data that is taken from JSON file, locally?

Question

The only way to style different parts of the text in different ways is to wrap them all in their own elements and give them separate class names.

e.g.

<p class="movie">
    <span class="movieName">Godzilla</span> <span class="movieYear">2014</span>
    <span class="movieGenre">Fantasy|Action|Sci-fi</span>
    <span class="movieRunningTime">2h 3min</span>
</p>

You can then experiment with the css to get it how you want.
You might also want to try replacing <p> with <section>, or wrap a <header> around the Name & year elements.

As an aside. I would recommend looking into using a template language like mustache (https://github.com/janl/mustache.js/) instead of manually writing the html in javascript. Such libraries will correctly escape the data when printing to the screen stopping weird bugs and xss attacks.

Accepted Answer

The only way to style different parts of the text in different ways is to wrap them all in their own elements and give them separate class names.

e.g.

<p class="movie">
    <span class="movieName">Godzilla</span> <span class="movieYear">2014</span>
    <span class="movieGenre">Fantasy|Action|Sci-fi</span>
    <span class="movieRunningTime">2h 3min</span>
</p>

You can then experiment with the css to get it how you want.
You might also want to try replacing <p> with <section>, or wrap a <header> around the Name & year elements.

As an aside. I would recommend looking into using a template language like mustache (https://github.com/janl/mustache.js/) instead of manually writing the html in javascript. Such libraries will correctly escape the data when printing to the screen stopping weird bugs and xss attacks.