Explore our sites

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite

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.org/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-combined.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
add comment

2 Answers

up vote 1 down vote

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.org/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.org/w/api.php?[....]').success(function(data){
    $scope.info = data;
});
share|improve this answer
 
Thanks for that. But still the data is not showing up in front end. I think I am doing something wrong in the html code. but dont know what. –  MdN Nov 19 '13 at 10:44
 
Take a look at your console in your browser (F12 in Chrome). It will give you usefull information about post/get requests and client side (js) errors. –  Stephan Vierkant Nov 19 '13 at 10:45
 
There are no errors in console –  MdN Nov 19 '13 at 10:46
 
using API directly didnt work. It didnt get me the data –  MdN Nov 19 '13 at 10:49
 
it displays No 'Access-Control-Allow-Origin' header is present on the requested resource error on console when I tried the API directly in my controller –  MdN Nov 19 '13 at 10:55
add comment
up vote 0 down vote accepted

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.org/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.org/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;
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.