需要帮助以HTML显示JSON文件

Question

I recently received a VPS from DigitalOcean and I have been trying to make a page that will display the status of the VPS. DigitalOcean has a very good API but i dont know where to get started.

My json file goes like this:

{"status":"OK","droplets":[{"id":00000,"name":"JamieDuke","image_id":0000,"size_id":00,"region_id":4,"backups_active":false,"ip_address":"0.0.0.0","private_ip_address":null,"locked":false,"status":"active","created_at":"2014-04-21T23:45:51Z"}]}

UPDATE: I havent tried any code. i have been looking high and low for something that works. Also, the json code i showed up there is pulled from a webpage and has to be to be live UPDATE 2: I am a total newb when it comes to css and Javascript. the only language i can do is HTMl. Can someone please help me with the other parts that are needed? I really need this script for a project.

Also, i need it to pull the script that is pulled from a url.

Answer 1

What coding languages can you use? I would recommend either PHP or JavaScript, depending on where you want to put the file (your desktop or a web server).

A general solution:

1. Parse the JSON into an Array/Object
2. Render HTML from the values in the Array/Object

Let us see some code you have tried!

Answer 2

I would just use jquery and parse it. See the url below.

https://api.jquery.com/jQuery.parseJSON/

Answer 3

It's as simple as

var data = JSON.parse(jsonString);
var html = [], i =0; ln = data.droplets.length;

html.push('<div class="style-div">data.status</div>');
for(i=0; i<ln;i++)
{
  var droplet = droplet[i];
  for(var prop in droplet) {
    html.push('<div class="style-droplet-inner">'+droplet[prop]+'</div>');
  }
}
body.innerHTML = html.join('');

You only need to worry about the CSS now.