web-dev-qa-db-fra.com

Est-il possible d'écrire des données dans un fichier json localement avec rien d'autre qu'angulaire?

J'essaie d'écrire des données dans un fichier json après avoir appuyé sur "Soumettre" sur un formulaire formel html en utilisant uniquement angulaire, mais rien ne se passe. Je sais que je peux lire un fichier json en utilisant angular mais je ne suis pas sûr de créer des fichiers. OnSubmit () dans le contrôleur:

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>

Le sample_data.json n'est pas créé et si je crée un fichier vide, il ne se remplit pas aussi avec les données. Le fichier $ scope.model contient des données par défaut. Si quelqu'un peut aider, ce sera très apprécié. Merci, Alon.

javascripthtmljsonangularjs
22
Alon Weissfeld

Est-il possible d'écrire des données dans un fichier json localement avec rien d'autre qu'angulaire?

Non. Même si vous exécutez la page à partir du système de fichiers local (par exemple, file://myfile.html) ou à partir d'un serveur Web local (par exemple, http://localhost/myfile.html ou http://Host-on-my-intranet/myfile.html), vous n'avez toujours aucun moyen d'écrire directement dans un fichier à partir d'un code JavaScript hébergé par un navigateur.

Deux choix:

  1. Envoyez-le à quelque chose (par exemple, un serveur) qui peut l'écrire, ou

  2. Fournissez-le en tant que data: URI (si possible dans votre cas) que l'utilisateur peut cliquer avec le bouton droit et choisir "enregistrer sous ..."

    Voici comment créer un data: URI pour du texte JSON:

    var uri = "data:application/json;charset=UTF-8," + encodeURIComponent(theJSON);

exemple complet sur # 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);
22
T.J. Crowder

Non.

Angular s'exécute côté client.

Si vous souhaitez écrire des données sur le serveur (même une sur le même ordinateur que le navigateur), vous avez besoin d'un code côté serveur pour le faire.

5
Quentin

Vous ne pouvez pas accéder au système de fichiers local (directement) à partir de Javascript. Ceci est appliqué pour des raisons de sécurité (et est logique lorsque vous y pensez!).

Accès aux fichiers locaux avec javascript

2
Alex McMillan

Comme ce n'est pas possible, vous pouvez essayer un autre itinéraire. Votre $ scope.save n'était pas invoqué d'ailleurs, seulement assigné.

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

Pour récupérer votre modèle, procédez comme suit sur init:

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

Le code suivant ajoute un bouton de téléchargement pour un objet JSON.

Note: encapsuler un bouton avec une balise d'ancrage n'est pas recommandé pour HTML 5 mais il fonctionne en Chrome qui est tout ce dont j'avais besoin. YMMV.

HTML:

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

Manuscrit:

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