如何在本地保存JSON响应并在HTML页面中使用它?

时间:2016-05-30 08:05:23

标签: html angularjs json

我是Angularjs的新手。

我希望通过拆分值将值存储在cookieStore中,并且需要使用html页面中的所有值。

Login.controller.js

function(response) {
            if (response.json.response.statuscode == 0 && response.json.response.statusmessage=='Success') {
                AuthenticationService.SetCredentials(vm.username, vm.password);
                $location.path('/');
                console.log(response);

                var resp = response;
                $window.localStorage.set("response", JSON.stringify(resp));

                var user = resp.json.response.user;
                for(var i=0; i<user.length-1; i++){
                var sessionid = resp.json.response.user[i].sessionid;
                $cookieStore.put('sessionid', sessionid);
                }
                console.log(user);
                console.log(JSON.stringify(sessionid));

                } else {
                        FlashService.Error(response.json.response.statusmessage);
                        vm.dataLoading = false;
                    }
                });

我正在获得JSON响应,如下所示

{
  "json": {
    "response": {
      "statuscode": "0",
      "statusmessage": "Success",
      "user": [
        {
          "groupname": "School BSK",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a0"
        },
        {
          "groupname": " Office",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a2"
        },
        {
          "groupname": "Team Developers",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a4"
        },
        {
          "groupname": "Pavan School",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45a6"
        },
        {
          "groupname": "Shubiksha Apartments",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45a8"
        },
        {
          "groupname": "Shubiksha Apartments",
          "membername": "Rohan Ritesh",
          "session_id": "573eaea74a96c3442a2e45aa"
        },
        {
          "groupname": "Little Millenium - Girinagar",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45ac"
        },
        {
          "groupname": "Group App Testing",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45ae"
        },
        {
          "groupname": "Group App Testing",
          "membername": "Ritesh Kumar",
          "session_id": "573eaea74a96c3442a2e45b0"
        },
        {
          "groupname": "Team Analysts",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45b2"
        },
        {
          "groupname": "Office",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45b4"
        },
        {
          "groupname": "Office",
          "membername": "Rohan Ritesh",
          "session_id": "573eaea74a96c3442a2e45b6"
        },
        {
          "groupname": "Office",
          "membername": "PreethiEngineer",
          "session_id": "573eaea74a96c3442a2e45b8"
        },
        {
          "groupname": "Test SR",
          "membername": "SR Tester",
          "session_id": "573eaea74a96c3442a2e45ba"
        },
        {
          "groupname": "Planet Kids Banashankari",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45bc"
        }
      ]
    }
  }
}

json响应是动态响应。

我需要将所有groupname,membername和sessionid分别存储在cookie商店中,我需要以列表的形式显示为“ groupname-membername ”。

如果用户点击任何groupname-membername,那么我需要使用相应的sessionid将请求发送到后端,我将获得该sessionid的响应。

我的 home.view.html

<div class="container-fluid text-center" ng-controller="UserDataController as ctrl">

     <div class="row content" style="margin-top:100px; color:rgba(51, 122, 183, 1);" ng-if="!model.displayHome">
        <button ng-click="getData('/login.controller','','','GET')">Click to login</button>
    </div>


        <div class="row content" ng-if="model.displayHome">
            <div class="col-sm-2 sidenav">
        <div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true">

        <img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" />
        <div class="form-group"> 
           <select class="form-control" ng-model="model.selectedValue" name="groupzname"> 
               <option value='' disabled> Switch Account </option>
                 <option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option>
                   </select>
                    </div>
                </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span>  Dashboard</a>
      </li>
      <li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a>
      </li>
         <li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a>
      </li>
         <li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a>
      </li>
         <li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a>
      </li>
        <li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a>
      </li>
        <li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a>
      </li>
        <li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a>
      </li>
    </ul>

  </div>
    </div>

    <div class="col-sm-8 text-left" ng-show="true"> 
      <h1>Welcome</h1>
      <div class="form-group">
          <label class="form-control" ng-model="model.membervalue" name="membername" style="border:none"> {{model.membervalue}}</label>
        </div>
</div>
</div>
     </div>

在我使用上面包含JSON响应的JSON文件之前,我从该JSON文件中获取了值。

它工作正常,但现在我需要使用后端响应动态列出值。

我在上面的“ home.view.html ”页面中引用了文件名“\login.controller”,我收到以下错误

angular.js:8495 GET http://127.0.0.1:63100/login.controller 404 (Not Found)

0 个答案:

没有答案