How to show JSON as formatted view in html

Question

I need to view JSON in my html page as formatted view. JSON come from database. I need to show it nut in Formatted view.

Just like

 {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] 
}

Anyone have any idea or suggestion ? or any resource that may help.

Edited: I want to create a JSON parser. User input different json and can view in formatted view.

Answer 1

Try JSON.stringify(data), its a Javascript function. Hope it might help.

Refer: Detail Explaination

If you are using PHP then use json_encode

Refer: json_encode manual

Answer 2

Since your are using angular-js , you can simply load your JSON feed from your controller then use the ng-repeat function to iterate over the items into your view page. Here down a sample where of how your HTML view can look like and you may need to style and build the blocks as per your needs:

<span>items:</span>
<span>[</span>
<br/>  
<div class="item" ng-repeat="item in items">
    <span>{</span><br/>
    <span class="field">year : {{item.year}}</span><br/>
    <span class="field">boat : {{item.boat}}</span><br/>
    <span class="field">position : {{item.position}}</span><br/>
    <span>}</span>
</div>

You can find a working sample in this JSFiddle .

Answer 3

First: your remote JSON is invalid: it's missing an ending bracket for crews .

It should be like this:

{
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}] // Missing this bracket
}

You didn't mention if your JSON is remote or not. I'm assuming not, so I'll use a local JavaScript var with eval function in this sample code.

<script type="text/javascript">

var content = {
"crews": [{
    "items": [
    {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "1",
        "name"      :   "Patrick Close",
        "college"   :   "Pembroke",
        "weight"    :   "14st 2lbs"
    }, {
        "year"      :   "2013",
        "boat"      :   "Blue",
        "position"  :   "2",
        "name"      :   "Geordie Macleod",
        "college"   :   "Christ Church",
        "weight"    :   "13st 10lbs"
    }]
}]
};

var json = eval(content);

for (c in json.crews) {
    var crew = json.crews[c];
    for (i in crew.items) {
        var item = crew.items[i];
        console.log(item.year);
        console.log(item.boat);
        console.log(item.position);
        console.log(item.name);
    }
}

</script>

I'm using console.log to output, so you'll be able to see data only if you open the browser console: