Bokchee 88 Bokchee 88 - 2 months ago 8
CSS Question

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

How to style a data that is taken from JSON file and generated dynamically with javascript? For example, when i take a 2 texts, i want to style them differently

"<p class='nameMovie'>"
+ data[ i ].name + " " + data[ i ].year + " " + data[ i ].gender + " " + data[ i ].runtime +
"</p>"


In this code i have text like
this:

Godzilla 2014 Fantasy|Action|Sci-fi 2h 3min


How i can for the year, gender and runtime to be under Godzilla

Something like this

Godzilla 2014
Fantasy|Action|Sci-fi 2h 3min

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.

Comments