CODEWITHSUNDEEP
javascripthtmlcssjsoncss-selectors
FrankDraws
FrankDraws

Reputation: 385

How To Turn JS Objects To HTML And Style With CSS

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>

Upvotes: 0

Views: 437

Answers (2)

Cameron Woodall
Cameron Woodall

Reputation: 94

The easiest thing to do would be to wrap the first and last name in another tag and add the css style to the new tag.

"<li><span>" + data.users[i].firstName + " " + data.users[i].lastName + "</span>"

and for the css

ul li span:first-child {
      font-weight:bold;
}

http://jsfiddle.net/5bfzo1q2/26/

Upvotes: 2

Quentin
Quentin

Reputation: 943134

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.

Upvotes: 4

Related Questions