Возможно ли записать данные в файл локального json с помощью только angular?

Я пытаюсь записать данные в json файл после нажатия "Отправить" в форме html formly-form, используя только angular, но ничего не происходит. Я знаю, что могу читать json файл с помощью angular, но не уверен в создании файлов. onSubmit() в контроллере:

function onSubmit() {
    $scope.save = function() {
        $http.post('./temp/sample_data.json', JSON.stringify($scope.model)).then(function(data) {
            $scope.msg = 'Data saved';
        });
    };
};

HTML:

<form name="form" ng-submit="onSubmit()" novalidate>
    <formly-form model="model" fields="fields"></formly-form><br/>
    <button type="submit">Submit</button>
</form>

Образец sample_data.json не создается, и если я создаю пустой файл, он также не заполняет данные. Функция $scope.model defenitly содержит данные. Если кто-то может помочь, он будет очень признателен. Спасибо, Алон.

Ответы

Ответ 1

Возможно ли записать данные в файл локального json с помощью только angular?

Нет. Даже если вы используете страницу из локальной файловой системы (например, file://myfile.html) или с локального веб-сервера (например, http://localhost/myfile.html или http://host-on-my-intranet/myfile.html), у вас по-прежнему нет средств прямой записи в файл из браузера -hosted JavaScript code.

Два варианта:

Отправьте его чему-нибудь (например, серверу), который может его записать, или
Предоставьте его как URI data: (если это возможно в вашем случае), который пользователь может щелкнуть правой кнопкой мыши и выбрать "сохранить как..."

Вот как вы создаете URI data: для некоторого текста JSON:
```
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);
```

Полный пример из # 2:

var theData = {
  foo: "bar"
};
var theJSON = JSON.stringify(theData);
var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);

var a = document.createElement('a');
a.href = uri;
a.innerHTML = "Right-click and choose 'save as...'";
document.body.appendChild(a);

Ответ 2

Нет.

Angular работает на стороне клиента.

Если вы хотите записать данные на сервер (даже один на том же компьютере, что и браузер), для этого вам понадобится код на стороне сервера.

Ответ 3

Вы не можете получить доступ к локальной файловой системе (напрямую) из Javascript. Это применяется по соображениям безопасности (и имеет смысл, когда вы об этом думаете!).

Локальный доступ к файлам с помощью javascript

Ответ 4

Так как это невозможно, вы можете попробовать другой маршрут. Ваш $scope.save не был вызван кстати, только назначен.

$scope.save = function() {
  localStorage.model = JSON.stringify($scope.model);
};
function onSubmit() {
  $scope.save();
  $scope.msg = 'saved';
};

Чтобы вернуть свою модель обратно в init:

if (localStorage.model)
  $scope.model = JSON.parse(localStorage.model);

Ответ 5

Следующий код добавляет кнопку загрузки для объекта JSON.

Примечание. Обертывание кнопки с тегом привязки не рекомендуется для HTML 5, но работает в Chrome, и это все, что мне нужно. YMMV.

HTML:

<a download="my-json-object.json" [href]="dataUri">
  <button>Download</button>
</a>

Машинопись:

  get dataUri(): SafeUrl {
    const jsonData = JSON.stringify(this.dataSource);
    const uri = 'data:application/json;charset=UTF-8,' + encodeURIComponent(jsonData);
    return this.sanitizer.bypassSecurityTrustUrl(uri);
  }