Parsing huge JSON object for facebook post - ruby-on-rails

Question

I am currently building an angular.js social media platform and am trying to display facebook posts on my feeds page for facebook. I currently have this:
<div id='fb-root'>
<div ng-repeat="post in facebook">
Test: {{post}}
</div>
</div>
which returns my Test post as:
[{"id":"4681211244366_4681199684077","from":{"id":"4681211244366","name":"Zachy Bear Jones"},"story":"Zachy Bear Jones and Alexander J. Marrs are now friends.","story_tags":{"0":[{"id":"4681211244366","name":"Zachy Bear Jones","offset":0,"length":16,"type":"user"}],"21":[{"id":"10205311345929912","name":"Alexander J. Marrs","offset":21,"length":18,"type":"user"}]},"actions":[{"name":"Comment","link":"https://www.facebook.com/4681211244366/posts/4681199684077"},{"name":"Like","link":"https://www.facebook.com/4681211244366/posts/4681199684077"}],"privacy":{"value":""},"type":"status","status_type":"approved_friend","created_time":"2014-10-11T21:33:29+0000","updated_time":"2014-10-11T21:33:29+0000"},{"id":"4681211244366_4678763463173pmpmymife","from":{"id":"4681211244366","name":"Zachy Bear Jones"},"story":"Zachy Bear Jones commented on a status.","story_tags":{"0":[{"id":"4681211244366","name":"Zachy Bear Jones","offset":0,"length":16,"type":"user"}]},"privacy":{"value":""},"type":"status","application":{"name":"Facebook for iPhone","namespace":"fbiphone","id":"6628568379"},"created_time":"2014-10-11T08:20:12+0000","updated_time":"2014-10-11T08:20:12+0000"},{"id":"4681211244366_4676849935336","from":{"id":"4681211244366","name":"Zachy Bear Jones"},"story":"Zachy Bear Jones likes a photo.","story_tags":{"0":[{"id":"4681211244366","name":"Zachy Bear Jones","offset":0,"length":16,"type":"user"}]},"privacy":{"value":""},"type":"status","created_time":"2014-10-10T18:35:16+0000","updated_time":"2014-10-10T18:35:16+0000"},{"id":"4681211244366_4676161038114","from":{"id":"4681211244366","name":"Zachy Bear Jones"},"story":"Zachy Bear Jones likes The ManKind Project.","story_tags":{"0":[{"id":"4681211244366","name":"Zachy Bear Jones","offset":0,"length":16,"type":"user"}],"23":[{"id":"95845568627","name":"The ManKind Project","offset":23,"length":19,"type":"page"}]},"picture":"https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/v/t1.0-1/c25.37.310.310/s100x100/47037_10151832647868628_1954427594_n.png?
Back as my JSON object. What is the next step to rendering this information as a post? In a prefect world I need profile pic, message, time, location, and the like, share, and comment actions. Any advice on how I can do this? Thank you anyone who can help!

Answer 1

First of all you should format your json object to a readable one to get the certain structure. Based upon your object I did this as an example:
[{
"id":"4681211244366_4681199684077",
"from":{
"id":"4681211244366",
"name":"Zachy Bear Jones"
},
"story":"Zachy Bear Jones and Alexander J. Marrs are now friends.",
"story_tags":{
"0": [{
"id":"4681211244366",
"name":"Zachy Bear Jones",
"offset":0,
"length":16,
"type":"user"
}],
"21":[{
"id":"10205311345929912",
"name":"Alexander J. Marrs",
"offset":21,
"length":18,
"type":"user"
}]
},
"actions":[{
"name":"Comment",
"link":"https://www.facebook.com/4681211244366/posts/4681199684077"
},{
"name":"Like",
"link":"https://www.facebook.com/4681211244366/posts/4681199684077"
}],
"privacy":{
"value":""
},
"type":"status",
"status_type":"approved_friend",
"created_time":"2014-10-11T21:33:29+0000",
"updated_time":"2014-10-11T21:33:29+0000"
},
...
To display data use something like this:
<div id='fb-root'>
<div ng-repeat="post in facebook">
Post from: {{post.from.name}} <br />
Story: {{post.story}} <br />
Tagged: <span ng-repeat="tag in post">{{tag.name}}</span>
</div>
</div>
This should result in something like this:
<div id='fb-root'>
<div>
Post from: Zachy Bear Jones <br />
Story: Zachy Bear Jones and Alexander J. Marrs are now friends. <br />
Tagged: <span>Zachy Bear Jones</span><span>Alexander J. Marrs</span>
</div>
</div>