Сохранить объект в файл JSON в angularjs?

Я новичок в angularjs и пытаюсь создать одностраничное приложение. У меня есть домашний контроллер с очень простым кодом. Что-то вроде этого руководства

Контроллер Angular JS инициализируется кодом вроде:

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     '_id': 1,
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     '_id': 2,
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     '_id': 3,
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

но в производственной среде данные могут быть не так аккуратно упакованы. Теперь моя проблема:

Могу ли я создать ссылку для скачивания JSON-представления моих объектов?

<li ng-repeat="phone in phones">
<a 
  href="data:text/json;charset=utf-8,{{encodeURIComponent(JSON.stringify(phone))}}" 
  download="{{phone._id}}.json">
    JSON
</a>
</li>

В основном я хочу получить доступ к текущему объекту phone с помощью функции форматирования encodeURIComponent(JSON.stringify(phone)).

Есть ли способ сделать это аккуратно?


javascript json angularjs single-page-application data-export
person user3194532    schedule 22.11.2015    source источник
comment
см. этот пост -serve-a-file-for-download-with-angularjs-or-javascript   -  person Josh Pendergrass    schedule 22.11.2015
comment
Пост объясняет много, но оставил несколько вещей открытыми, которые были необходимы здесь.   -  person user3194532    schedule 22.11.2015

Ответы (2)


arrow_upward
2
arrow_downward

Благодаря предложениям rnrneverdies я добавил в конфигурацию следующее:

phonecatApp.config(['$compileProvider', function ($compileProvider) {
  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|data|blob):/);
}]);

и эти функции в $scope в контроллере

$scope.stripClone = function(obj) {
  if (null == obj || "object" != typeof obj) return obj;
  var copy = obj.constructor();
  for (var attr in obj) {
    if (obj.hasOwnProperty(attr) && attr != '$$hashKey') {
      var obj_attr = obj[attr];
      if (typeof obj_attr == "object"){
        copy[attr] = this.stripClone(obj_attr); 
      } else if (typeof obj_attr == "array"){
        copy[attr] =[];
        for(var i =0; i<obj_attr.length; i++){
          copy[attr].push(this.stripClone(obj_attr));
        }
      }else{
        copy[attr] = obj_attr;
      }
    }
  }
  return copy;
};
$scope.myEncodeJson = function(obj){
  return JSON.stringify(this.stripClone(obj));
};

Теперь я могу вызвать эти функции в шаблоне, чтобы сделать магию json, которую я хотел:

<a ng-href="data:text/json;charset=utf-8,{{myEncodeJson(phone)}}

Спасибо за вашу помощь

person user3194532    schedule 22.11.2015

arrow_upward
2
arrow_downward

В основном я хочу получить доступ к текущему объектному телефону с помощью функции форматирования encodeURIComponent(JSON.stringify(phone)).

Вы просто добавляете метод в свой контроллер: рабочий пример (коллекции)

$scope.encodeJson = function(phone) {
  return encodeURIComponent(JSON.stringify(phone));
}

<a href="data:text/json;charset=utf-8,{{encodeJson(data)}}" download="{{filename}}">

Вам также может понадобиться санировать URL-адрес.

Для коллекций это в основном то же самое:

<p ng-repeat="item in collection">
  <a href="data:text/json;charset=utf-8,{{encodeJson(item)}}" download="{{item.id}}.json">
</p>

Кроме того, вам может потребоваться удалить $$HashKey, добавленный ng-repeat, с помощью синтаксиса «track by item.id» в файле ng-repeat.

Другой подход может состоять в том, чтобы добавить эти функции в сам $scope и использовать их внутри атрибутов ng-*.

$scope.encodeURIComponent = encodeURIComponent;
$scope.JSON = JSON;
person rnrneverdies    schedule 22.11.2015
comment
Спасибо за быстрый ответ, но это не то, что я искал. Я бы предпочел вычислить представление на лету, чем иметь два представления одних и тех же данных. - person user3194532; 22.11.2015
comment
Спасибо, это навело меня на правильный путь. Добавление функций в $scope помогло - person user3194532; 22.11.2015