Help understanding how to parse and display api results

I know how to do it in PHP, and I'm playing with it in Jquery, if I figure that out I'll post a codepen link here.

In PHP, i would do it as so. I'd make a new php file, and I would post this:

$json_string = file_get_contents("http://codeivate.com/users/ppowis.json"); 
$parsed_json = json_decode($json_string);

$name = $parsed_json->{'name'};
$level = $parsed_json->{'level'};

And so on, for whatever pieces of info from that Json you needed. You could also write a loop here, which wouldn't be a bad idea. This Json isn't too long, but it isn't uncommon that you would use a loop instead to get the data. I intentionally left off the closing ?> php bracket on documents like this that are 100% php, since improper whitespace can screw with the doc, leaving of the closing tags will help insure you do not have that problem. Something I learned from Randy Hoyt here.

Than, on the php file that would contain the table or so, before I did the table, say at the very top of the page I would have.

<?php include('json.php');?>

Assuming that these two files are in the same directory. If not, you just need to adjust your url parameter to match your file structure.

Than just have my table, using my PHP variables to populate the values.

<table>
    <thead>
        <tr>
            <th>Data</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name</td>
            <td><?php echo $name;?></td>
        </tr>
        <tr>
            <td>Level</td>
            <td><?php echo $level;?></td>
        </tr>
    </tbody>

</table>

If you wrote a loop, than you'd just write another loop to create the table HTML and populate it with your loop of the JSON. Just depends on what you need. That's a way to do it server side anyway. This will work even if the user has Javascript off (only about 2% of users on average), but your server needs to have PHP installed (most do).

I'll work on a jquery version, I need to learn that anyway.

Here is a jquery version. I've never done it this way before. There is much more that could be done, and I learned I need to learn more about this, but it seems like a good chance to try it out.

This isn't a production quality piece of code. It's to try something out. You'll notice I have absolutely no content in the HTML part, just empty divs.

The red box should turn to green when the program detects you coding. The message will also change too. You can change my if statements in the javascript to be not true (!=) if you want to see it change manually.

Have fun with it.

http://codepen.io/kevink/pen/Lydex