How to present server ready data (REST,JPA and relationships) on the client side using AngularJS? -


since new angularjs have come across issue when comes presenting database data has been mapped using rest , manipulated using jpa. ready can be. no need further manipulation. using $http.get have been able present first table calling url when comes getting data presented different table sending parameter doens't work out. in module.js looks this

(function () {     'use strict';      angular.module('app',[]);  })();

the controller.js this:

    (function () {     'use strict';      angular         .module('app')         .controller('mycontroller', mycontroller);      mycontroller.$inject = ['$http'];      function mycontroller($http) {         var vm = this;          vm.players = [];         vm.historia = [];         vm.getall = getall;         vm.gethistory = gethistory;          init();          function init(){             getall();             gethistory(name);         }          function getall(){             var url = "/all/players";             var playerspromise = $http.get(url);             playerspromise.then(function(response){                 vm.players = response.data;             });         }          function gethistory(name){             var url = "/all/allplayergames/" + name;             var historiapromise = $http.get(url);             console.log([url]);             historiapromise.then(function(response){                 vm.historia = response.data;                 console.log([response.data]);             });         }      } })();

and last not least html

<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org"> <head>     <meta charset="utf-8"/>     <title>game</title>     <link th:if="${mode=='development'}"  rel="stylesheet" href="../static/bootstrap.css" th:href="@{/bootstrap.css}"/>     <link th:if="${mode=='production'}"  rel="stylesheet" href="../static/bootstrap.min.css" th:href="@{/bootstrap.min.css}"/>     <script type="text/javascript" src="/static/angular.min.js" th:src="@{/angular.min.js}" ></script>     <script type="text/javascript" src="/static/app/app.module.js" th:src="@{/app/app.module.js}" ></script>     <script type="text/javascript" src="/static/app/yatzy.controller.js" th:src="@{/app/yatzy.controller.js}" ></script>     </head> <body ng-app="app" >  <header>     <nav class="navbar navbar-default">         <div class="container-fluid">             <div class="navbar-header">                 <a class="navbar-brand" href="#">game results</a>             </div>         </div>     </nav> </header> <div>     <div class="row">         <div class="col-lg-offset-2 col-lg-8">            <div ng-controller="mycontroller vm">                <div class="btn-group" role="group">                    <button ng-click="vm.getall()" type="button" class="btn btn-default">player game history</button>                </div>             <table  class="table">                 <thead>                 <tr>                     <th>playerid</th>                     <th>name</th>                  </tr>                 </thead>                 <tbody>                 <tr ng-repeat="player in vm.players">                 <td> {{player.playerid}}</td>                 <td> {{player.name}}</td>                     <td>                         <button class="btn btn-danger" ng-click="vm.gethistory(player.name); ">view history</button>                     </td>                  </tr>                 </tbody>              </table>                <table class="table">                 <thead>                 <tr>                      <th>score</th>                     <th>name</th>                 </tr>                 </thead>                 <tbody>                 <tr ng-repeat="p in vm.historia">                      <td> {{p.score}}</td>                     <td> {{p.player.name}}</td>                 </tr>                 </tbody>              </table>            </div>          </div>      </div>  </div> <footer class="footer" style="position: absolute; bottom: 0;background-color: #f5f5f5;" >     <div class="container">         <p  th:text="${#dates.format(datetime,'dd mmm yyyy hh:mm')}" class="text-muted">todays date: </p>     </div> </footer> </body> </html>

and console log show right player url when "view history" clicked, doesnt data table score or name.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more