Foxwells Foxwells - 29 days ago 6
CSS Question

How to customise JSON with CSS/HTML/JavaScript?

I know, a very vague question, but I wasn't sure what else to put...

I'm creating a forum on JCink. They let you customise user profiles, but it displays some stuff in JSON format. I have a vague idea of what JSON is, but I'm not sure how to use CSS, HTML, and Javascript to customise its appearance.

Could anyone help me figure it out? Google really didn't help... ^^;

The code I'm being given is this:

[
{
"contact_id": "3",
"friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-3.jpg",
"friend_name": "acetest",
"posts": "2",
"active": "3 Nov 2016, 06:32:23"
}
]


And I want to make it look like this: http://prntscr.com/d2pbks

I don't need you to flat out do it for me, but some pointers would be super great for when I go to customise other profile fields that give me stuff in JSON format.

Answer

You basically want to render data in HTML. You'd have to parse the object and render it how you want. According to JCLink documentation you're provided the JSON object. So all you have to do is take that data and render it.

Something like this. This doesn't render it how you want but you can modify the HTML and CSS to do what you want.

var jsonData = [{
  "contact_id": "3",
  "friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-3.jpg",
  "friend_name": "acetest",
  "posts": "2",
  "active": "3 Nov 2016, 06:32:23"
},{
  "contact_id": "5",
  "friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-2.jpg",
  "friend_name": "dingo",
  "posts": "8675309",
  "active": "1 Nov 2016, 06:32:23"
}];

var htmlOut = "";

for (var i = 0, numProfiles = jsonData.length; i < numProfiles; ++i) {
  var thisData = jsonData[i];
  htmlOut += "<div>";
  htmlOut += "<h1>" + thisData.friend_name + "</h1>";
  htmlOut += "<img src='" + thisData.friend_avatar + "' />";
  htmlOut += "<br />";
  htmlOut += "posts: " + thisData.posts;
  htmlOut += "<br />";
  htmlOut += "active: " + thisData.active;
  htmlOut += "</div>";
}

document.getElementById("profiles").innerHTML = htmlOut;
<div>
  <h1>Friends</h1>
  <div id="profiles"></div>
</div>

Comments