How To Turn JS Objects To HTML And Style With CSS

Question

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>

Wrap then in <span>s when adding them to the <li>, then style them that way. — gen_Eric
– gen_Eric, Commented Sep 25, 2014 at 20:11
You can't do anything to them while they are inside the JS object. You need to output those properties to the DOM. — Radu Andrei
– Radu Andrei, Commented Sep 25, 2014 at 20:12
JSON (or JS objects, as in this case) cannot be styled with CSS. Only HTML elements can be styled in such a manner. Rewrite the question and title to show only the final/actual HTML - and therein the problem will be visible. If the problem is about converting the JSON to appropriate HTML, then ask about that (and remove anything wrt CSS). I recommend using proper DOM manipulation to generate the HTML/content. — user2864740
– user2864740, Commented Sep 25, 2014 at 20:12

Quentin · Accepted Answer · 2014-09-25 20:20:26Z

4

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.

edited Sep 25, 2014 at 20:20

answered Sep 25, 2014 at 20:14

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

BoltClock Over a year ago

Welllll technically you can query JSON with a selector given an implementation that performs all the necessary mappings, although obviously the first statement is merely a simplification, as the question is really about transforming data from JSON into DOM elements then styling them with CSS.

Cameron Woodall · Accepted Answer · 2014-09-25 20:55:46Z

2

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/

edited Sep 25, 2014 at 20:55

answered Sep 25, 2014 at 20:17

Cameron Woodall

941 silver badge6 bronze badges

Collectives™ on Stack Overflow

How To Turn JS Objects To HTML And Style With CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related