AngularJS to Mysql

17 浏览
0 Comments

AngularJS to Mysql

我一定是错过了什么……因为我对此一窍不通。\n我有这个angularjs的数据：\n

$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' },
    ];

\n而我想把它放到一个mysql表中。我创建了表，然后尝试获取表数据：\nJS：\n

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

\nPHP：\n

    $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);

\n当我手动尝试PHP输出时：\n

[{"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"}]

\n有人知道问题出在哪里吗？

0

2 答案

0 Comments

问题的原因是在第一个示例中，代码可以正常工作，因为在给$scope.todoList赋值之前，已经执行了forEach函数。而在第二个示例中，代码给$scope.todoList赋值的方式是通过一个$http请求获取的数据，由于$http请求是异步的，所以在执行forEach函数时，$http请求还没有返回数据，导致$scope.todoList为undefined，从而报错。

解决方法是将forEach函数放在successCallback函数内部，这样可以确保在获取到数据后再执行forEach函数。

以下是整理后的文章：

最近遇到了一个问题，我尝试使用JSON.parse(response.data)来解析数据，但是没有成功。下面是我的代码：

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();
});

这段代码运行良好，没有任何问题。但是当我尝试使用$http请求来获取数据时，出现了一个错误：

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();
});

在控制台中出现了一个错误：TypeError: Cannot read property 'forEach' of undefined。看起来好像是因为在执行forEach函数时，$http请求的结果还没有返回，导致$scope.todoList为undefined，从而报错。

解决这个问题的方法是将forEach函数放在successCallback函数内部，这样可以确保在获取到数据后再执行forEach函数。最终的代码如下：

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;
      $scope.todoList.forEach(function(item) {
        item.color = getRandomColor();
      });
    }, 
    function errorCallback(response) {
      console.log("ERROR!");
    }
  );

通过将forEach函数放在successCallback函数内部，成功解决了这个问题。感谢大家的帮助！

参考资料：

- good edit and How to wait till the response comes from the $http request, in angularjs?

0
0 Comments

问题出现的原因是读取和分配响应数据的值；解决方法是使用JSON.parse(response.data)来解析响应字符串并赋值给$scope.todoList。以下是一些可能有帮助的主题：

- [如何处理来自Ajax响应的JSON数据数组？](https://stackoverflow.com/questions/28985363)

- [什么是正确的JSON内容类型？](https://stackoverflow.com/questions/477816)

如果您在Ajax调用后遇到更新问题：

- [如何在ajax调用后刷新我的作用域？](https://stackoverflow.com/questions/27397360)

- [Angular控制器作用域在jQuery ajax调用后不更新](https://stackoverflow.com/questions/21127709)

更多与此问题相关的内容：

- [如何等待$http请求的响应返回，使用AngularJS？](https://stackoverflow.com/questions/18421830)

如果您的问题不属于这些主题，请让我们知道以便解决。

0