Foxwells Foxwells - 27 days ago 9
JSON Question

What do I do with JSON data?

I know, a very newbie question...

I'm creating a forum on JCink. They let you customise user profiles, but it gives you some data in JSON format. I have a vague idea of what JSON is, but I'm really sure what I'm supposed to do with it. I want to make it look a certain way, but I have no idea how to get started.

Could anyone help me figure it out? I tried searching Google for what I'm supposed to do with this data, but it didn't really 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 on what I even do with this JSON data would be super great.

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