Json Data are not show in html file in angularjs using php files

Question

How do I set the php files in angularJS to set the id of any json code?

Hole and sole this is my final code

<!DOCTYPE html>
    <html class="no-js" lang="en" ng-app="myBusStopApp">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My bus stop - Real time data</title> 
        <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">   
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>   
        <script type="text/javascript">     

        angular.module('myBusStopApp', [])
    .controller('myBusStopCtrl', ['$scope', '$http', function ($scope, $http) {
        //$scope.realTimeData;

        var url ="http://192.168.1.10/android_connect/JsonReturn.php";
     //   var url = "http://reis.trafikanten.no/reisrest/realtime/getrealtimedata/3010435" + "?callback=JSON_CALLBACK";
    alert(url); 
        $http.jsonp(url)

            .success(function(data){
                alert(url); 
                $scope.realTimeData = data;
            });

    }]);</script>
    </head>
    <body style="margin-top:2%;font-size:14px;font-family:Open Sans; padding-left:2%;padding-right:2%;">
    <div ng-controller="myBusStopCtrl">
        <center>
        <div class="table-responsive" style="max-width:800px;">
        <table class="table table-striped" >
            <thead>
                <tr class="info">
                <th>Bus#</th>
                <th>Destination</th>
                <th>Wait time</th>          
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in realTimeData">
                    <td>{{item.id}}</td>
                    <td>{{item.email}}</td>
                    <td>kk</td>            
                </tr>
            </tbody>
        </table>
    </div>
    </center>
    </div>
    </body>
    </html>

When I try any other setting, then it causes a chrome error

Resource interpreted as Script but transferred with MIME type text/html

And following is my PHP code

<?php header('Access-Control-Allow-Origin: *'); ?> 
<?php

        // set up the connection variables
        $db_name  = 'hotel_db';
        $hostname = 'localhost';
        $username = 'root';
        $password = '';

        // connect to the database
        $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);

        // a query get all the records from the users table
        $sql = 'SELECT * FROM user';

        // use prepared statements, even if not strictly required is good practice
        $stmt = $dbh->prepare( $sql );

        // execute the query
        $stmt->execute();

        // fetch the results into an array
        $result = $stmt->fetchAll( PDO::FETCH_ASSOC );

        // convert to json
        $json = json_encode( $result );

        // echo the json string
        echo $json;
?>

What can i do in this situation

Please help me of this Thanx in advance

in upeer code i have include this

<?php header('Access-Control-Allow-Origin: *'); ?>

but show me error in chrome but i have run this code in android phone

 XMLHttpRequest cannot load http://192.168.1.10/android_connect/JsonReturn.php. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

Please please help me out of this situation please

i have a problem in XMLHttpRequest cannot load 192.168.1.10/android_connect/JsonReturn.php. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. In android phone .. When i am include the this in my php files but any answer when i enable in this extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi then show me the proper answer — Deepak Acharya, Jan 22 '15 at 06:31

score 0 · Answer 1 · answered Jan 22 '15 at 05:52

0

if you returning a json data add the relevant header for json,

header('Content-Type: application/json');
echo $json;

answered Jan 22 '15 at 05:52

Kalhan.Toress

21,683
8
68
92

chrome error is solve but the data are not show in the html file – Deepak Acharya Jan 22 '15 at 05:55
what u get on `console.log(data);` on success ajax ? – Kalhan.Toress Jan 22 '15 at 05:59
i can't get it any answer in console.log(data); in javascript code. – Deepak Acharya Jan 22 '15 at 06:01
sir K.Toress i have a problem in XMLHttpRequest cannot load http://192.168.1.10/android_connect/JsonReturn.php. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. In android phone .. When i am include the this in my php files but any answer when i enable in this extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi then show me the proper answer – Deepak Acharya Jan 22 '15 at 06:28

score 0 · Accepted Answer · answered Jan 22 '15 at 06:47

0

Just add:-

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: *");

    at the top of php page inside
 <?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: *");

your code..   

 ?>

It allows you to enable cors(cross origin resource sharing).

answered Jan 22 '15 at 06:47

squiroid

13,809
6
47
67

I have already Add this in my php file but error show me this but show me error in chrome but i have run this code in android phone XMLHttpRequest cannot load http://192.168.1.10/android_connect/JsonReturn.php. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. Please please help me out of this situation please I am useing this for android application – Deepak Acharya Jan 22 '15 at 06:51
Is your php hosted on any webserver ..?? Or just a simple file ..?? If simple please host it on any server locally then hit it. – squiroid Jan 22 '15 at 06:54
my php file at localserver when i upload this in the the mobile application then show me {{item.id}} this type of data not original data – Deepak Acharya Jan 22 '15 at 06:55
ok here is the best link for you just read it carefully http://stackoverflow.com/a/3744697/1632286 – squiroid Jan 22 '15 at 06:56
change $http.jsonp to $http.get and try it again – squiroid Jan 22 '15 at 06:57
Where i can chage it in this code -------- – Deepak Acharya Jan 22 '15 at 06:59
Hey your angular is on server or normla because chrome throws this error in case you are simply running angular in chrome instead for testing you can check it in firefox or deploy your angular to server too. – squiroid Jan 22 '15 at 07:08
When i put the my on server http://eaglenew.comoj.com/JsonReturn.php then show me the Uncaught SyntaxError: Unexpected token < what can i do in this situation and i can't get it data on web browser – Deepak Acharya Jan 22 '15 at 07:52
You are printing table you just need to show json data remove that table tag that is not valid json – squiroid Jan 22 '15 at 07:55
squiroid sir error is remove but data are not show in html file i will try out i this code – Deepak Acharya Jan 22 '15 at 08:02
console.log(yourdata) and check is it showing in console ..?? – squiroid Jan 22 '15 at 08:05
no data are not show in console this is my js code – Deepak Acharya Jan 22 '15 at 08:06
no error in console can i show you to my all code in my upper Question – Deepak Acharya Jan 22 '15 at 08:08
Check your request in network and check the response.Use developer console. – squiroid Jan 22 '15 at 08:09
mean's I do not understand this data are proper show in the php file but don't show in the html file – Deepak Acharya Jan 22 '15 at 08:11
press f12 you get console and theis is a network tab in it open it refresh the page and send your call you see the response of your call in that panal. – squiroid Jan 22 '15 at 08:12
JsonReturn.php eaglenew.comoj.com GET 200 OK text/javascript angular.min.js:98 Script 18.7 KB 18.5 KB 3.88 s 2.33 s i see this in network tab what is it mean's in this i have no ideas – Deepak Acharya Jan 22 '15 at 08:16
That mean data is comming now you have to play with it in front end – squiroid Jan 22 '15 at 08:17
but data are not show in front end my front end code is {{user.id}}{{user.ship_name}}{{user.email}} – Deepak Acharya Jan 22 '15 at 08:18
please help me out of this situation please – Deepak Acharya Jan 22 '15 at 08:24

Json Data are not show in html file in angularjs using php files

2 Answers2