How To Turn JS Objects To HTML And Style With CSS


Tags: javascript,html,css,json,css-selectors

Problem :

I'm learning JSON (or JS Objects) and I'm trying to figure out how to bring said objects into HTML and style them using CSS.

How can I select 'firstName' and 'lastName' objects to style them?

Here's the fiddle: http://jsfiddle.net/frankDraws/5bfzo1q2/25/

var data = { "users":[
            {
                "firstName":"Jack",
                "lastName":"Lewis",
                "startDate": {
                    "month":"January",
                    "day":12,
                    "year":2000
                }
            },
            {
                "firstName":"Raymond",
                "lastName":"Girard",
                "startDate": {
                    "month":"April",
                    "day":28,
                    "year":1994
                }
            },
            {
                "firstName":"Enrique",
                "lastName":"Sosa",
                "startDate": {
                    "month":"October",
                    "day":14,
                    "year":2004
                }
            }
    ]}

    var output="<ul>";
    for (var i in data.users) {
        output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " &ndash; " + data.users[i].startDate.month + " " + data.users[i].startDate.day + ", " + data.users[i].startDate.year+ "</li>";
    }
    output+="</ul>";
  
    document.getElementById("writeTo").innerHTML=output;
@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
    background: MediumTurquoise;
    font: normal 17px/1.8em Roboto, Helvetica, sans-serif;
}
div {
    box-shadow: 0 3px 5px darkcyan;
    background: gainsboro;
    border-radius: 5px;
    margin: 30px auto 0;
    max-width: 300px;
    max-height: 200px;
    padding:20px;
    
}
ul {
  margin: 0;
  padding: 0;
}
ul li {
    color: #555;
    list-style:none;
    
}
.firstName :first-child {
    font-weight:bold;
}
<div id="writeTo"></div>



Solution :

You can't select JSON with CSS. It operates on a DOM.

It looks like you aren't trying to though. You just have a text node (which you created using half a dozen strings) in a list item.

Currently you don't have anything that CSS could select (which is mostly limited to elements) that would distinguish between the various bits of data, so you can't.

You need to add additional markup.

e.g.

"<li><span class='firstName'>" + data.users[i].firstName + "</span>"

I'd strongly suggest building each element at a time and appending them rather then trying to mash up a huge string though.


    CSS Howto..

    How to create responsive text on top of an image?

    How to fix CSS background position

    How can
    /
    /
    's with 100% width, yet discrepancies in mobile browsers, be combatted?

    How to 'clip away' part of a div using CSS?

    How to turn off materialize css containers when on mobile?

    How can I place html text on top of a canvas flot chart?

    How to get a property from other class in CSS?

    Show some characters above a picture on hover

    how to give conditional comments in firefox for a single css style statement

    How to prevent CSS block elements from affecting parent inline-blocks

    How to load local copy of bootstrap css when the cdn server is down?

    How do I change the alignment of my search box?

    How to keep block elements inline and also correctly centered?

    How to make a simple plus one voting system in code igniter

    How to use absolute element when its closet ancestor is a float element?

    How to expand text to full DIV width

    How do I make two divs in the same “row” float in different directions?

    show div and execute CSS animation in separate div on “li hover”

    how to remove one canvas element from displaying on top of another canvas element

    How to position tables in ie 9 using css?

    How to make a scroll customization for mobile application?

    How can I caption an image inside a paragraph

    ?

    How to add a new rule to an existing CSS class

    How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form? [duplicate]

    How to apply information submitted in Code Mirror? [closed]

    Show Child Div Above Elements on Parent Div Level using z-index

    how do i edit my CSS to show following things please [closed]

    How to use jQuery to set min-height the same as window

    CSS how to position element fixed just for y-axis?

    How to make a frame around CSS component from a picture source