AngularJS to Mysql

Question

I must be missing something... because I'm really a noob at this.

I have this angularjs data:

$scope.todoList = [
      { text: 'Check me out' },
      { text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro' },
      { text: 'Ex has semper alterum, expetenda dignissim' },
    ];

And I wanted to put it in a mysql table instead. I created the table and then tried to get table data:

JS:

$http({method:'POST',url:'process.php'})
          .then(
            function successCallback(response) { $scope.todoList = response.data;}, 
            function errorCallback(response) {$scope.todoList = "ERROR!";});

PHP:

    $sql = "SELECT * from `todolist`";
    $result = $conn->query($sql);
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = array("text" => $row['text']);
    }
    echo json_encode($data);

When I manually try the PHP the output is:

[{"text":"Check me out"},{"text":"Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro"},{"text":"Ex has semper alterum, expetenda dignissim"}]

Does someone know where the problem is?

Your response data type is not [valid json data type](http://stackoverflow.com/questions/477816/what-is-the-correct-json-content-type), and assigns response-string without parsing to `$scope.todoList`; use `JSON.parse(response.data)` — MohaMad, Mar 11 '17 at 22:28

score 0 · Answer 1 · edited May 23 '17 at 12:25

I think your problem is about reading and assigning value of response data; so I've commented:

Your response data type is not valid json data type, and assigns response-string without parsing to $scope.todoList; use JSON.parse(response.data)

and suggest these topics (maybe helpful):

If you have problem with Updating after AJAX call:

more related to this problem:

How to wait till the response comes from the $http request, in angularjs?

If your problem is none of these topics, let us know to solve it.

Rui Silva · Answer 2 · 2017-03-11T23:07:44.847

I tried JSON.parse(response.data) but no success. I'll try to elaborate a bit more:

This code worked fine:

function getRandomColor() {
  var i = Math.floor(Math.random() * (colors.length - 1));
  return colors[i];
}

$scope.todoList = [
  { text: 'Check me out' },
  { text: 'Lorem ipsum dolor sit amet, possit denique oportere at his, etiam corpora deseruisse te pro' },
  { text: 'Ex has semper alterum, expetenda dignissim' },
];

$scope.todoList.forEach(function(item) {
  item.color = getRandomColor();
});

But now this one gives an error in console:

TypeError: Cannot read property 'forEach' of undefined

function getRandomColor() {
  var i = Math.floor(Math.random() * (colors.length - 1));
  return colors[i];
}

$http({method:'POST',url:'process.php',data:{function: "todolist"}})
          .then(
            function successCallback(response) {$scope.todoList = response.data;}, 
            function errorCallback(response) {console.log("ERROR!");});

$scope.todoList.forEach(function(item) {
  item.color = getRandomColor();
});

It seems like it doesn't wait for the ajax results... But I don't really know.

SOLVED putting foreach function inside successCallback function.

Solved putting the forEach function inside the successCallback. Thanks everyone! — Rui Silva, Mar 11 '17 at 22:49
good edit and [How to wait till the response comes from the $http request, in angularjs?](http://stackoverflow.com/questions/18421830/how-to-wait-till-the-response-comes-from-the-http-request-in-angularjs) — MohaMad, Mar 11 '17 at 22:55

AngularJS to Mysql

2 Answers2