Получение значения из объекта JSON с Angular

0

Я пытался изучить AngularJS в последнее время и ударил по дороге с помощью Localstorage, который я трачу так много часов, пытаясь спасти его локально, я думаю, что он работает так, как сейчас, но теперь я хотел бы распечатать данные, сохраненные локально из массива JSON, как я могу это сделать?

РЕДАКТИРОВАТЬ:

Немного разъяснения. Что я пытаюсь достичь, так это получение информации, которую я сохраняю в локальном хранилище на веб-сайте в виде строки, поэтому читаем. надеюсь, я буду более понятным. заранее спасибо

Мой взгляд.

<ion-list>
  <div >
        <ion-item ng-controller='ModalEditCtrl' ng-click="openModal()">
              <div class="thumbnail" style="border:1px black solid">
          </div>
          <div  ng-controller="createPerson"  class="contactinfo" >
            <li ng-repeat="contact in contactdetail.contactinfo">  {{contact.name}} </li>
          </div>

        </ion-item>

  </div>

  <div ng-controller="ModalAddCtrl">
    <button type="button" ng-click="openModal()">+++</button>
  </div>

</ion-list>

Мой контроллер

app.controller('createPerson', function ($scope) {
  var id = id_counter = 1;
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };
  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: '[email protected]'}
  ];
  $scope.saveData = function () {
    id_counter += 1;
    $scope.editorEnabled = false;
    $scope.contactinfo.push({
      name: $scope.contactName,
      phone: $scope.contactPhone,
      email: $scope.contactEmail,
      sort_id: id_counter
    });
    //$scope.todoText = ''; //clear the input after adding
    localStorage.setItem('contactinfo', JSON.stringify($scope.contactinfo));
  //  localStorage.setItem("contacts", JSON.stringify(contacts));

  }
  $scope.loadData = function () {
    var contacts = localStorage.getItem("contactinfo");
    var contactdetail = JSON.parse(contacts); //
    console.log(contactdetail);

  }
  $scope.clearData = function () {
    window.localStorage.clear();

  }
});
  • 0
    «... распечатывать данные ...» - вы имеете в виду журнал консоли или на своей веб-странице? Если вы имеете в виду консольный журнал, похоже, что вы уже это делаете ... разве вы имеете в виду строковый формат?
  • 0
    Я имею в виду на моей веб-странице, в формате строки. так что я могу иметь различные значения в массиве в некотором списке.
Теги:
ionic-framework
arrays
ionic

2 ответа

0

Угловая имеет оболочку для окна, которая должна использоваться внутри вашего кода. Существует также модуль ngStorage или множество доступных решений, которые имеют дело с хранилищем браузеров по Угловому пути. Кроме того, Угловая функция имеет такие функции, как angular.toJson() и angular.fromJson(). Если, например, jsonObj является массивом JSON, тогда var obj = angular.fromJson(jsonObj) дает вам массив JavaScript. Если jsonObj имеет свойство array внутри, вы должны пойти с: var jsArray = angular.fromJson(jsonObj).array.

0

Ваш вопрос не очень ясен, я не думаю, что вы сможете получить большую помощь, если не почистите его немного.

Чтобы распечатать данные (обычно для отладки), вы можете просто добавить {{contactinfo|json}} в свой html.

Чтобы фактически отображать данные для использования на веб-странице, для вас должно работать следующее.

<div ng-repeat="contact in contactinfo track by $index">
    <div>Name: {{contact.name}}</div>
    <div>Phone: {{contact.phone}}</div>
    <div>Email: {{contact.email}}</div>
</div>

Я думаю, что часть этой логики может быть лучше разделена и на фабрику. Что-то вроде этого, может быть...?

var contactFactory = angular.module('contactFactory', []);

contactFactory.factory('contactInfo', ['$window', function ($window) {
    var id = id_counter = 1;
    var contacts = [];

    function addContact(name, phone, email) {
        id_counter += 1;
        contacts.push({
          name: name,
          phone: phone,
          email: email,
          sort_id: id_counter
        });
        saveData();
    }

    function saveData(contactInfo) {
        $window.localStorage.setItem('contactinfo', angular.fromJson(contacts));
    }

    function loadData() {
        contacts = angular.toJson($window.localStorage.getItem('contactinfo'));
        return contacts;
    }

    function clearData() {
        $window.localStorage.removeItem('contactinfo');
    }

    return {
        addContact: addContact,
        saveData: saveData,
        loadData: loadData,
        clearData: clearData
    };
}]);

var app = angular.module('yourAppName', ['contactFactory']);

app.controller('createPerson', ['$scope', 'contactInfo', function ($scope, contactInfo) {
  $scope.editorEnabled = false;
      $scope.disableEditor = function() {
        $scope.editorEnabled = false;
      };
      $scope.enableEditor = function() {
        $scope.editorEnabled = true;
      };

  $scope.contactinfo = [
    {name: 'test', phone: 1231, email: '[email protected]'}
  ];

  $scope.saveData = function () {
    contactInfo.addContact($scope.contactName, $scope.contactPhone, $scope.contactEmail);
    $scope.editorEnabled = false;
  }
  $scope.loadData = contactInfo.loadData;
  $scope.clearData = contactInfo.clearData;
}]);
  • 0
    Спасибо, трек по $ index работает, но он показывает только то, что у меня есть в $ scope.contactinfo, но не то, что я сохраняю локально. Когда я добавляю ['contactFactory'] в мой модуль (var app = angular.module ('phonebookApp', ['ionic']))), приложение вообще не работает? Я на самом деле не узнал о факторах, и я пойду читать об этом. Спасибо вам за помощь.
  • 0
    @Casper Я не проверял этот заводской код, поэтому он может быть не идеальным. В вашей функции загрузки $scope.loadData вы загружаете переменную, которая больше нигде не используется. Вы должны поместить это в область где-нибудь. Самый простой способ - заменить файл console.log на $scope.contactinfo = contactdetail
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню