Valid JSON to display data in angularJs

Question

I want to display data(json) in my site using AngularJs . here's what i did :
Create a database in phpmyAdmin .
Create a table with 2 row , subject and body . Should i create an id ?
After doing with PHP and angular , I got JSON like this :

[{
    "0":"Soheil","subject":"Soheil",
    "1":"Sadeghbayan","body":"Sadeghbayan"}
    ,{"0":"","subject":"","1":"","body":""}
    ,{"0":"","subject":"","1":"","body":""}
    ,{"0":"dasdasd","subject":"dasdasd","1":"qe","body":"qe"}
    ,{"0":"Hello","subject":"Hello","1":"This is chandler !","body":"This is chandler !"}
    ,{"0":"","subject":"","1":"","body":""},
    {"0":"Something new in website","subject":"Something new in website","1":"oh Awsome !","body":"oh Awsome !"
}]

I think this is invalid JSON because when I replace it with custom JSON that I wrote it work .

Json valid

{
    "fruits": [
        {
            "id": "1",
            "name": "Apple"
        },
        {
            "id": "2",
            "name": "Orange"
        }
    ]
}  

AngularJS

var fruitsApp = angular.module('fruitsApp', []);

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function(callback) {
            $http.get('fruits.json').success(callback);
        }
    };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync(function(results) {
        console.log('fruitsController async returned value');
        $scope.fruits = results.fruits;
    });
});

Html

<ul>
            <li ng-repeat="fruit in fruits">
                {{fruit.subject}} is {{fruit.body}}
            </li>
</ul>  

php

    include('config.php');



$data = json_decode(file_get_contents("php://input"));
$subject = mysql_real_escape_string($data->subject);
$body = mysql_real_escape_string($data->body);
mysql_select_db("angular") or die(mysql_error());
mysql_query("INSERT INTO newstory (subject,body) VALUES ('$subject', '$body')");
Print "Your information has been successfully added to the database.";



$query = "SELECT * FROM newstory";
$result = mysql_query($query);

$arr = array();
while ($row = mysql_fetch_array($result)) {
    $subject = $row['subject'];
    $body = $row['body'];
    $arr[] = $row;
}
echo json_encode($arr);

Any idea ? Thx in advance

Answer 1

Your JSON is a valid. Refer to this for information on JSON and this to check/validate a JSON object.

The data coming back from your $http.get / database data does not have a fruits attribute and you expect that when you set your $scope.fruits (the below snippet is taken from your code):

 $scope.fruits = results.fruits;

The structure of the data that is being returned by the $http.get call is different than the format of your sample data.

Here's your $http.get / database data (I shortened it for brevity):

[
{
    "0": "Soheil",
    "1": "Sadeghbayan",
    "subject": "Soheil",
    "body": "Sadeghbayan"
},
{
    "0": "Hello",
    "1": "This is chandler !",
    "subject": "Hello",
    "body": "This is chandler !"
},
{
    "0": "",
    "1": "",
    "subject": "",
    "body": ""
}
]

And here's your sample / mock data:

{
"fruits": [
    {
        "id": "1",
        "name": "Apple"
    },
    {
        "id": "2",
        "name": "Orange"
    }
]
}

The former is an array of objects with keys: 0 , 1 , subject and body . The latter is an object with keys: fruits .

They are both valid JSON objects with different object structures. But, you expect a fruits attribute where there isn't one. Also, your HTML/UI might be expecting the data format to look like what is in your mock data. So check that too.