using angular js get data from codeigniter controller

I work with codeigniter with angular js. I had created one controller name Car.one model name car_model. In car controller i have created one method view () in which i am fetching data from the table that code file is

Car Controller

    <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class Car extends CI_Controller {

     public function __construct() {

        parent::__construct();
        $this->load->model('Car_model');
     }

     public function view()
     {
        $data = $this->db->get("cars")->result_array();
        echo json_encode($data);
     }
    }

i want to fetch data in json formate so had fetched that data and echo json_encode($data);

now i want to retrieve that data in angualrjs.

add_car View

<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body ng-app="myapp" ng-controller="myctrl">
        <form method="post"  ng-submit="add(car_det)">
            Car name : <input type="text" ng-model="car_det.cname" name="name"><br>
            Car Image : <input type="file" custom-on-change="uploadFile" ng-model="car_det.cimage"><br>
            <input type="submit" name="add">
        </form>
        <br>
        <table>
            <tr><td>ID </td><td>Car Name</td><td>Car Image</td></tr>
            <tr ng-repeat="x in otherdata">
                <td>{{x.id}}</td><td>{{x.cname}}</td><td>{{x.cimage}}</td>
            </tr>
        </table>
    </body>
</html>


<script type="text/javascript">
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$http.get("<?=base_url()?>Car/view").then(function(response){
                $scope.otherdata = response.data;
            });
});
</script>

**

Error :

While i writing this code in my file, problem is that it shows data in table format it is proper but also showing extra json array in starting of page.

I am getting this output :

**

i had not written any code to display in starting of page still showing that ...

how to resolve that problem .. ?

Answers


Change your controller function to:

public function view()
{
   $data = $this->db->get("cars")->result_array();
   header('Content-Type: application/json');
   echo json_encode($data);
}

You're sending json from the controller. but if you don't specify it, it's send as the default type which would be html i believe and that's why it's printed on your page.

Even better is if you use:

$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($data));

using output is the right way to deal with output data in codeigniter controllers.


If your view page is a html page then you have to define a global variable baseUrl where you need to write static base_url() value like this

var baseUrl = 'http://localhost/yourProjectName/';

If this your page is php page then defiine a hidden input tag and this value is base_url(); and inside script write

var baseUrl = $('#inputId').val();

then your script like this..

app.controller("myctrl",function($scope,$http){
    $http.get(baseUrl+'Car/view').then(function(response){
       $scope.otherdata = response.data;
    });         
});

Need Your Help

Stored Procedure Syintax

mysql sql stored-procedures

I want to do write a stored procedure using MysQL, that let me insert, update or delete using parameters, into persona's table, who has the fields id_persona, nombres, apellidos &amp; edad; so can ...

How can I write a post statement to an HttpUrlConnection that's zipped?

java android post gzip httpurlconnection

I've always been told you should zip the data to be more efficient. On the input size, this is relatively easy, as shown below: