0

So I have this situation, can somebody advise how to deal with it.

Using server side code take the JSON output from an unreliable API supplied by a client, and render the data on a page in an appropriate format.

The API URL given returns time series data that represents the performance of a set of websites in Google rankings over a period of 30 days.

The client’s API URL is:

https://tools.ayima.com/techtest/api/marketintel

However, the client does not want the API endpoint exposed on the public internet. The API is also slow and very unreliable, so you cannot simply fetch the API data using JavaScript directly. You’ll need to use some kind of server side code to get the API data for the page first. The API is very slow and will sometimes just fail all together with a 503 HTTP status and an empty body, so your code should implement some kind of cache or database as well as logic to retry failed requests. For this test the actual data returned will never change, but for the purposes of cache invalidation you can assume the data would normally change every 24 hours.

You may either output the page/front end code using the same backend script, directly including the output from the API in the source, or simply print/proxy the JSON and fetch the data using AJAX in separate front end code - whatever you feel most comfortable doing.

I tried to get the data with php so original API is hiden and after use angularjs to fetch it.

This would be my php to fetch the data

<!DOCTYPE html>
<html>
<body>
<?php

$homepage = file_get_contents('https://tools.ayima.com/techtest/api/marketintel');
echo htmlentities($homepage)
?>

</body>
</html>

And this would be angularjs part 

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in ayima">
    <p>{{ x.domain }}</p>
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://94.136.40.103/~boyisbadnews.com/test/marketintel.php")
  .success(function (response) {$scope.ayima = response.marketIntel;})
  .error(function(data, status, headers, config) {
      // something went wrong
    });
});
</script>

</body>
</html>

But can't make it work.

BoyIsBadNews
  • 23
  • 6

1 Answers1

0

The php file (marketintel.php) to fetch the data of the server must be:

PHP File:

<?php
    header("Content-Type: application/json");
    header("Cache-Control: no-cache");

    $homepage = file_get_contents('https://tools.ayima.com/techtest/api/marketintel');
    echo $homepage;
?>

HTML File: I've seen that you have a little errors in your markup. Here there is a proper html.

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>Page title</title>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>
  <div data-ng-controller="customersCtrl">
    <ul>
      <li data-ng-repeat="x in ayima">
        <p>{{ x.domain }}</p>
      </li>
    </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://dfjb.webcindario.com/dataAyima.php").success(function(response) {
          $scope.ayima = response.marketIntel;
        })
        .error(function(data, status, headers, config) {
          // something went wrong
        });
    });
  </script>
</body>

</html>
Danny Fardy Jhonston Bermúdez
  • 5,317
  • 5
  • 23
  • 35