动态将数据添加到JSON

Question

So what I'm trying to do is storing the dataUri of pictures in my localstorage. I am only using javascript and angularJS. No jQuery at this point.

The pictures are uploaded through inputs of type="file" with ids like " input_file_0 " and so on.

I am able to store the id and the dataUri in my $scope.files variable. So that if I say console.log($scope.files); I get an output like this:

$scope.files

< [input_file_0:File, input_file_1:File, ...]
  length:0
  < input_file_0:File
       lastModified: 1457515898145
       lastModifiedDate: Wed Mar 09 2016 10:31:38 GMT+0100 
       name: "name-of-picture.png"
       size: 206156
       src:  "data:image/png;base64,iVBORw0K..."
       type: "image/png"

  > input_file_1:File

controller.js

/*
 * stores $scope-values for longer reference in the localStorage
 * @returns {undefined}
 */
    $scope.storeDataInLocalStorage = function () {
        if (typeof (localStorage) !== 'undefined') {
            //storing file data
            var data = {};
            for (var i = 0; i <= $scope.files.length; i++) {
                data.push({ 'file_input_'+i : $scope.files['file_input_'+i].src}) ;
            }
            localStorage.setItem('files', JSON.stringify(data));
        }
        /* No localstorage support */
        else {
            alert("Sorry. Localstorage is not supported");
        }
    };

---

I want to achieve a localStorage item like this:

localStorage.getItem('files') = 
{'input_file_0' : "data:image/png;base64,iVBORw0K...", 
 'input_file_1 : "data:image/png;base64,iVBORw0K..."}

But setting the key just doesn't work. Getting the src-attribute works just fine. But having a variable to be the key doesn't work. It always substitutes it with just the variablename.

---

Answer 1

I solved it myself trying something I tried before that didn't work and now suddenly does. Maybe there was something already stored locally and i didnt' delete it correctly.

I didn't use push this time and so my code looks like this:

controller.js

/*
 * stores $scope-values for longer reference in the localStorage
 * @returns {undefined}
 */
    $scope.storeDataInLocalStorage = function () {
        if (typeof (localStorage) !== 'undefined') {
            //storing file data
            var data = {};
            for (var i = 0; i <= $scope.files.length; i++) {

                data['input_file_'+i]= $scope.data['input_file_'+i].src;

            }
            localStorage.setItem('files', JSON.stringify(data));
        }
        /* No localstorage support */
        else {
            alert("Sorry. Localstorage is not supported");
        }
    };

still anyone an idea how to do it using array.push() ?

Answer 2

Use extra object to add items in for loop:

  var data = [];
  for (var i = 0; i <= $scope.files.length; i++) {
        var o = {};
        o[('file_input_' + i)] = $scope.files['file_input_'+i].src;
        data.push(o);
   }
  localStorage.setItem('files', JSON.stringify(data));