How to convert js array to remote json data?


#1

I am trying to get this array from a remote server which is connected to a dynamic database of course.

As far as i read from ionic forums i need to use $http function from AngularJS but i am pretty new to AngularJS and current examples seems too much complicated to me like this one.

I am trying to convert this example to Remote JSON.

HTML Part:

  <ion-list>

    <ion-item ng-repeat="item in items" 
              item="item"
              href="#/item/{{item.id}}">
      Person {{ item.id }} Name {{ item.name }}
    </ion-item>

  </ion-list>

Array Part:

  var friends = [
    { id: 1, name: 'G.I. Joe' },
    { id: 2, name: 'Miss Frizzle' },
    { id: 3, name: 'Scruff McGruff' },
    { id: 4, name: 'G.I. Joe' },
    { id: 5, name: 'Miss Frizzle' },
    { id: 6, name: 'Scruff McGruff' },
    { id: 7, name: 'G.I. Joe' },
    { id: 8, name: 'Miss Frizzle' },
    { id: 9, name: 'Scruff McGruff' },
    { id: 10, name: 'G.I. Joe' },
    { id: 11, name: 'Miss Frizzle' },
    { id: 12, name: 'Scruff McGruff' },
    { id: 13, name: 'G.I. Joe' },
    { id: 14, name: 'Miss Frizzle' },
    { id: 15, name: 'Scruff McGruff' },
    { id: 16, name: 'G.I. Joe' },
    { id: 17, name: 'Miss Frizzle' },	
    { id: 18, name: 'Ash Ketchum' }
  ];

I have tried:

1-
$scope.items = jsonp(‘http://www.garsoncepte.com/json.php’);

2-

 $scope.items = $http.jsonp('http://www.garsoncepte.com/json.php');

3-

  var url = "http://www.garsoncepte.com/json.php";

  $scope.items = $http.jsonp(url);

#2

Here is an example: $http.json.


#3

First, you should create a service as follows

.factory('JsonService', function($http) {
  return {
    all: function(callback) {
      $http.jsonp('http://www.garsoncepte.com/json.php?callback=JSON_CALLBACK', {cache: true})
      .success(
        function(data) {
          callback(data);
        }
      );
    }
   }
 });

Then call this service in your controller as follows

.controller('CategoriesController', function($scope, JsonService) {
  CategoryService.all(function(data) {
    $scope.items = data;
  });
});

#5

Hi maximillian,

I have successfly created a proper jsonp response thanks to you. BUT your example is not working with LISTS which i need.


#6

Hi m_abdelfattah,

I have tried what you suggested but it’s not working here is the code:

p.s. previous link wasn’t right. i’ve changed it.


#7

I have strong distaste for jsonp format, but if you trust the source (or own it yourself) then ok. There is no real need for JSONP in my opinion, but anyways off my soapbox. I’d suggest just having a JSON endpoint and use CORS to load something cross domain unless you really have to support old browsers that don’t support CORS.

This is a modified version of the list example loading your JSONP. http://codepen.io/gnomeontherun/pen/BrxLn

I didn’t take the high road and build a full service for it, I just made a simple example to show the $http service loading the data.

You must have fixed your JSONP service to return an array instead of just an object while I was building this example, I noticed it started to work :smile:


#8

Hey man, you had just some syntax errors, and you did not add the JsonService to your controller dependencies so it was not calling it. I fixed the code for you, please check the following link and let me know if you still have questions.


#9

thanks a ton. i have still questions though :slight_smile: