Using factory to display Data in AngularJS

Question

I want to display data from database to page . i'm using factory service and i see json in firebug .
this is my code :

Html

<div ng-controller="fruitsController">
    <ul>
        <li ng-repeat="fruit in fruits">
            {{fruit.subject}}
        </li>
    </ul>
</div>

Js

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

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function(callback) {
            $http.get('insert.php').then(
                function(response){
                    var store = [];
                    store = response.data;
                },
                function(error){
                    console.log(error);
                });

        }
    };
});

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

this is insert.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 story (subject,body) VALUES ('$subject', '$body')");
Print "Your information has been successfully added to the database.";

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

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

json

<b>Notice</b>:  Trying to get property of non-object in <b>D:\xampp\htdocs\Angular\factory\insert.php</b> on line <b>14</b><br />
Your information has been successfully added to the database.[{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"Soheil","subject":"Soheil","1":"Sadeghbayan","body":"Sadeghbayan"},{"0":"adsas","subject":"adsas","1":"asdasdasda","body":"asdasdasda"},{"0":"Say","subject":"Say","1":"Something","body":"Something"},{"0":"asd","subject":"asd","1":"asdasdasd","body":"asdasdasd"},{"0":"asda","subject":"asda","1":"dasdasd","body":"dasdasd"},{"0":"asd","subject":"asd","1":"asdadd","body":"asdadd"},{"0":"asaS","subject":"asaS","1":"saAS","body":"saAS"},{"0":"adasda","subject":"adasda","1":"dasdasdasdasdasdasd","body":"dasdasdasdasdasdasd"},{"0":"AS","subject":"AS","1":"sASasAS","body":"sASasAS"},{"0":"asd","subject":"asd","1":"asdasd","body":"asdasd"},{"0":"xZ","subject":"xZ","1":"zXzXZX","body":"zXzXZX"},{"0":"weqe","subject":"weqe","1":"qeqeqe","body":"qeqeqe"},{"0":"gf","subject":"gf","1":"kjh","body":"kjh"},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""},{"0":"","subject":"","1":"","body":""}]

what am i missing in this code to display data? thx in advance

you need to return the store var within your success function of the http GET — bencripps
– bencripps, Commented Oct 6, 2014 at 22:29

Christopher Robot · Accepted Answer · 2014-10-06 23:05:51Z

1

You're not returning the value from the $http.

IMO, a better way to set this up, since $http returns a promise.

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function() {
            return $http.get('insert.php');
        }
    };
});

fruitsApp.controller('fruitsController', function($scope, fruitsFactory) {
    fruitsFactory.getFruitsAsync()
      .then(function (response) { // Leveraging the .then from $http promise.
          $scope.fruits = response.data.fruits;
      });
});

Updated per your JSON addition:

Your JSON doesn't look like valid JSON.

{
    "fruits": [
        {"0":"","subject":"","1":"","body":""},
        {"0":"","subject":"","1":"","body":""},
        {"0":"","subject":"Soheil","1":"Sadeghbayan","body":"Sadeghbayan"}
    ]
}

Would make more sense so that fruit in fruits ends up being each object (model) in your collection of fruits.

edited Oct 6, 2014 at 23:05

answered Oct 6, 2014 at 22:36

Christopher Robot

3111 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3856699 Over a year ago

thx buddy , but it's not working yet,i updated my question (showing json)

developer10 · Accepted Answer · 2014-10-06 23:11:51Z

1

I think you need a promise in your controller as well:

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

EDIT: Pay attention to the above changes. Also, you will need to change the usage in the html - it is no longer just ˘fruits˘ but foo.fruits instead. Try that. I suppose that you're using ng-repeat to iterate over the items, right?

edited Oct 6, 2014 at 23:11

answered Oct 6, 2014 at 22:32

developer10

1,5003 gold badges15 silver badges33 bronze badges

11 Comments

user3856699 Over a year ago

thx for your answer , you've helped me a lot today .but it's not working

developer10 Over a year ago

Check by placing console.log(results) just below function(results) what results actually contains... Maybe you don't need to add ˘.fruits˘ after it if it already returns correct data.

user3856699 Over a year ago

i can see json in firebug but cant show them in html

developer10 Over a year ago

OK, could you please paste the response (or at least the very top and some lines below) so i can see what is being returned

developer10 Over a year ago

Try removing .fruits from this line so it reads: $scope.fruits = results;

|

Sadeghbayan · Accepted Answer · 2014-10-08 12:51:21Z

0

try to use $arr [] = array(); in your php file .

answered Oct 8, 2014 at 12:51

Sadeghbayan

1,1612 gold badges19 silver badges38 bronze badges

Comments

bencripps · Accepted Answer · 2014-10-06 23:05:59Z

0

This is how I would do it:

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

fruitsApp.factory('fruitsFactory', function($http) {
    return {
        getFruitsAsync: function(callback) { return $http.get('insert.php'); }
    };
});

This way your factory is really returning a promise.

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

Then within your controller, you can handle the data response as you see fit. In your case, you're setting a $scope variable to be used in angular's two-way data binding.

edited Oct 6, 2014 at 23:05

answered Oct 6, 2014 at 22:43

bencripps

2,0433 gold badges20 silver badges27 bronze badges

3 Comments

user3856699 Over a year ago

i just copied and paste your code , but i got an error in console. "fruitsFactory.getFruitsAsync.success is not a function" sry for being stupid

bencripps Over a year ago

sorry made an edit, needed to make it a method call.

user3856699 Over a year ago

now i can see json or response but get an error "fruitsFactory.getFruitsAsync(...) is undefined"

Collectives™ on Stack Overflow

Using factory to display Data in AngularJS

4 Answers 4

1 Comment

11 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

11 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related