javascript - retrieve data from Wikipedia and show it using angularjs

I am new to angularjs. I am trying to get data from wikipedia and show it in the front end. I retrived the data from wiki using the following php code

$url = '.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids';
$json = file_get_contents($url);
echo json_encode($json);

following is my controller

var demoApp = angular.module('demoApp',['ngRoute']);
demoApp.controller('SimpleController',function ($scope,$http){
    $http.post('server/view1.php').success(function(data){
        $scope.info = data;
    });
});

my html is as follows

<html ng-app="demoApp">
<head>
    <title> AngularJS Sample</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-bined.min.css">
</head>
<body>
    <div ng-controller="SimpleController">
        {{info.query}} // I dont know if this is right
    </div>
</body>
</html>

I want to display all the content that is retrieved in the front end but it is not showing up. I dont know what I have done wrong. I am a newbie to angularjs.

I am new to angularjs. I am trying to get data from wikipedia and show it in the front end. I retrived the data from wiki using the following php code

$url = 'http://en.wikipedia/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids';
$json = file_get_contents($url);
echo json_encode($json);

following is my controller

var demoApp = angular.module('demoApp',['ngRoute']);
demoApp.controller('SimpleController',function ($scope,$http){
    $http.post('server/view1.php').success(function(data){
        $scope.info = data;
    });
});

my html is as follows

<html ng-app="demoApp">
<head>
    <title> AngularJS Sample</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-bined.min.css">
</head>
<body>
    <div ng-controller="SimpleController">
        {{info.query}} // I dont know if this is right
    </div>
</body>
</html>

I want to display all the content that is retrieved in the front end but it is not showing up. I dont know what I have done wrong. I am a newbie to angularjs.

Share Improve this question edited Nov 19, 2013 at 10:51 asked Nov 19, 2013 at 10:32 MdN 891 silver badge10 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

Skip the PHP Part and use Angular JSONP with the following parameter:

format=json
callback=JSON_CALLBACK

So Angular can understand and parse the Wiki Answer:

$http({
    url: 'http://de.wikipedia/w/api.php?action=query&list=random&rnlimit=1&rawcontinue&format=json&callback=JSON_CALLBACK',
    method: 'jsonp'
}).success(function(response) {
    console.log(response);
    $scope.response = response;
});

This works also with action=parse to get an article.

If you want to display the raw json response on the page, use the json filter:

<pre>{{ response | json }}</pre>

With the given URL, you get a JSON-formatted response. Why do you encoding a JSON respons to JSON? That's not needed, so skip that part.

<?php
$url ='http://en.wikipedia/w/api.php?action=query&prop=extracts|info&exintro&titles=Sachin_Tendulkar&format=json&explaintext&redirects&inprop=url&indexpageids';
$json = file_get_contents($url);
echo json;
?>

Just open the url, you can see the reponse.

In your example, your php code is pretty useless. Maybe you can use the API directly in your controller:

$http.get('http://en.wikipedia/w/api.php?[....]').success(function(data){
    $scope.info = data;
});

I finally found my answer.

HTML

<html ng-app="demoApp">
    <head>
        <title> AngularJS Sample</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script src="http://code.angularjs/1.2.1/angular-sanitize.min.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div ng-controller="SimpleController">
            <div ng-bind-html='info'></div>
        </div>
    </body>
</html>

Controller

var demoApp = angular.module('demoApp',['ngSanitize']);
demoApp.controller('SimpleController',function ($scope,$http){
    $http.post('server/view1.php').success(function(data){
        $scope.info = data;
    });
});

PHP

$url = 'http://en.wikipedia/w/api.php?action=query&prop=extracts&titles=Sachin_Tendulkar&format=json&redirects&inprop=url&indexpageids';
$jsonString = json_decode(file_get_contents( $url ),true);
$pageData = $jsonString['query']['pages'][57570]['extract'];
echo $pageData;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - retrieve data from Wikipedia and show it using angularjs - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)