I want this json to be displayed in angular - php

Question

I want this multilevel array of jason in angular format i am not being able to do it.
Json file to be displayed in angular goes here.
I am able to display properties and geometry not others
{
"type": "FeatureCollection", //first fie
"metadata": {
"generated": 1456209730000,
"api": "1.4.0",
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 2.3,
},
"geometry": {
"type": "Point",
"coordinates": [
-150.7703,
63.5849
]},
"id": "ak12869032"
},
{
"type": "Feature",
"properties": {
"mag": 2.43
},
"geometry": {
"type": "Point",
"coordinates": [
-120.8253326,
36.6078339
]},
"id": "nc72596150"
}],
"bbox": [ //last field
-150.7703,
33.7698333
]}

Answer 1

Please follow these steps:
1) create $scope.tempData variable in your controller
2) get your value in $scope
3) $scope.tempData=[your json data];
4) you can use tempData in anywhere within controller.
for(var d in tempData)
{
var data=tempData[d].id;
}
now you are able to getting id from your json.but for its giving last value.
so you can cretae array and pushed on every loop.
5) if you want use in html can use ng-repeat.
If you are beginner vist my blog.

Answer 2

Edit your json:
{
"type": "FeatureCollection",
"metadata": {
"generated": 1456209730000,
"api": "1.4.0",
"count": 3
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 2.3,
"place": "93km WNW of Cantwell, Alaska",
"time": 1456207082000
},
"geometry": {
"type": "Point",
"coordinates": [
-150.7703,
63.5849
]
},
"id": "ak12869032"
},
{
"type": "Feature",
"properties": {
"mag": 2.43,
"place": "42km WSW of Mendota, California",
"time": 1456206494170
},
"geometry": {
"type": "Point",
"coordinates": [
-120.8253326,
36.6078339
]
},
"id": "nc72596150"
}
],
"bbox": [
-150.7703,
33.7698333,
0.79,
-115.9471667,
63.5849,
8.8
]
}
See the points: http://bl.ocks.org/d/60bc280edef4ed4da464

Answer 3

To display json in angularjs, please use filter json with model.
<input type="text" ng-model="(jsonData | json)">{{jsonData | json}}</input>

Answer 4

Using Pre Tag we can style it in html page
In your Controller:
$scope.details={name:"xyz",address:[{place:"cc"},{place:"second"}]}
In HTML Page: <pre>{{details|json}}</pre>