Search code examples
phpmysqlangularjsangularjs-ng-repeatauto-increment

Why does ng-repeat behave weird with auto-incrementing id?

I have a form that inserts into a MySQL database.
POST requests and GET requests work perfectly.

I've decided to add an id column in the MySQL table.
The SQL statement used to add my id column was:
ALTER TABLE thestuff ADD COLUMN id INT AUTO_INCREMENT UNIQUE FIRST;

Before I added the id column in the table, when I entered a date and content and pressed submit, the fetch would work perfectly and the date and content would immediately appear.

But now that I added the id column, when I add a date and content and press submit, the date and content would show up immediately but so should the id but for some reason it does not.

I've tried everything and cannot figure out why the id has a delay.
The only way for me to get the id to show is by refreshing the page.

Any suggestions would be very appreciated!
Thank you!

Before Before

After After

HTML 

<body ng-app="myApp">

  <div ng-controller="insertController">
    <h2> What I learned today </h2>
    <form>
      Date <br>
      <input type="text" ng-model="date"><br><br>
      Content <br>
      <textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
      <input type="button" value="Submit" ng-click="insertdata()">
    </form>
  </div>

  <div ng-controller="fetchController"><br>
    <span ng-repeat="item in results">
      <div class="card">
        id: {{item.id}}<br>
        <span class="bold-underline">{{item.date}}</span><br>
        {{item.content}}
        <button class="deleteButton" ng-click="deleteThisItem()"> x </button>
      </div>
      <br><br>
    </span>
  </div>

</body>

fetch.php 

<?php
  header('Access-Control-Allow-Origin: *'); // clientside(Node) <-> serverside(PHP)

  $theConnection = new mysqli("localhost", "root", "", "storestuff");

  if($theConnection->connect_error) {
    printf("Connection failed: %s\n", $theConnection->connect_error);
    exit();
  }

  $query = "SELECT * FROM thestuff";
  $theData = array();

  if($result = $theConnection->query($query)) {
    while($row = mysqli_fetch_array($result)) {
      $theData[] = array(
        'id'=>$row['id'],
        'date'=>$row['date'],
        'content'=>$row['content']);
    }
    echo json_encode($theData); // Echo the output for the controller to access
    $result->free(); // Free the result set
  }
  else {
    echo "0 results.";
  }
  $theConnection->close(); // Close the connection
?>

fetchController.js 

var size = 0;
var count = 0;

app.controller('fetchController', function ($scope, $http, resultsService) {
  $http.get('http://localhost/storestuff/fetch.php')
    .then(function successCallback(response) {
      size = (response.data).length;
      while(count < size) {
        var id = response.data[count].id;
        var date = response.data[count].date;
        var content = response.data[count].content;
        resultsService.addItem(id, date, content);
        count++;
      }
      size = 0;
      count = 0;
      $scope.results = resultsService.getItems();
  });
});

Result.js 

app.service('resultsService', function() {
  var results = new Array();

  var addItem = function(id, date, content) {
    var obj = new Object();
    obj['id'] = id;
    obj['date'] = date;
    obj['content'] = content;
    results.push(obj);
  }

  var getItems = function() {
    return results;
  }

  var deleteItem = function() {

  }

  return {
    addItem: addItem,
    getItems: getItems,
    deleteItem: deleteItem
  };

});

insert.php 

<?php

  header('Access-Control-Allow-Origin: *');

  $theConnection = mysqli_connect("localhost", "root", "", "storestuff");
  if(mysqli_connect_errno()) {
    echo "Failed to connect to MySQL.";
  }

  $theData = json_decode(file_get_contents('php://input'));
  $date = mysqli_real_escape_string($theConnection, $theData->date);
  $content = mysqli_real_escape_string($theConnection, $theData->content);

  mysqli_query($theConnection, "INSERT INTO thestuff(date, content) VALUES('$date', '$content')");

  mysqli_close($theConnection);

?>

insertController.js 

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

app.controller('insertController', function($scope, $http, resultsService) {
  $scope.insertdata = function() {
    $http({
      method: 'POST',
      url: 'http://localhost/storestuff/insert.php',
      data: {'date':$scope.date, 'content':$scope.content, 'in':'json-format'},
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then(function(res) {
      console.log("Successful response", res)
      resultsService.addItem($scope.date, $scope.content);
      $scope.date = "";
      $scope.content = "";
    })
    .catch(function(err) {
      console.error("Error with POST", err);
    });
  }
});
Solution

  • in the insertController you are missing id parameter

    resultsService.addItem($scope.date, $scope.content); //wrong

    hence date is getting assigned to id.

    Correct: resultsService.addItem(res.id, $scope.date, $scope.content);