如何在jhipster中管理来自自定义REST的.json响应数据

时间:2017-06-29 07:15:12

标签: javascript angularjs json spring rest

我正在Jhipster应用上创建一个新的自定义RESTful Web服务(使用Spring框架管理),该应用程序搜索包含我在输入中提供的文本的对象请求

我测试了来自html和Angular.js的REST调用,它运行正常。唯一的问题是我不知道如何在html页面而不是.json格式中解析结果。

调用REST的我的HTML代码(位于" src / main / webapp / app / layouts / navbar / navbar.html ")是:

<form class="navbar" method="GET" action="/api/search">
    <input style="margin-top: 2.8%; margin-right:2px;" class="btn" type="text" name="content" placeholder="Search requests..." />
    <input style="margin-top: 2.8%; margin-right:5px;" class="btn btn-primary" type="submit" text="Search" value="Search">
</form>

我的&#34; navbarController.js &#34;是这样的:

(function () {

    'use strict';

    angular
            .module('businessRequestApp')
            .controller('NavbarController', NavbarController);

    NavbarController.$inject = ['$state', 'Auth', 'Principal', 'ProfileService', 'LoginService', 'Request'];

    function NavbarController($state, Auth, Principal, ProfileService, LoginService, Request) {

        var vm = this;
        vm.isNavbarCollapsed = true;
        vm.isAuthenticated = Principal.isAuthenticated;

        ProfileService.getProfileInfo().then(function (response) {
            vm.inProduction = response.inProduction;
            vm.swaggerEnabled = response.swaggerEnabled;
        });

        vm.login = login;
        vm.logout = logout;
        vm.toggleNavbar = toggleNavbar;
        vm.collapseNavbar = collapseNavbar;
        vm.$state = $state;
        vm.requests = [];

        loadAll();

        function loadAll() {
            Request.query(function (result) {
                vm.requests = result;
                vm.searchQuery = null;
            });
        }

        function login() {
            collapseNavbar();
            LoginService.open();
        }

        function logout() {
            collapseNavbar();
            Auth.logout();
            $state.go('home');
        }

        function toggleNavbar() {
            vm.isNavbarCollapsed = !vm.isNavbarCollapsed;
        }

        function collapseNavbar() {
            vm.isNavbarCollapsed = true;
        }

    }
    })();

我的java REST(&#34; RequestResource.java &#34;)是这样的:

@GetMapping("/search")
@Timed
public ResponseEntity<List<Request>> searchRequest(@RequestParam String content) {
    log.debug("REST request to get Request : {}", content);
    List<Request> requestsFounded = findByContentContaining(content);
    return ResponseUtil.wrapOrNotFound(Optional.ofNullable(requestsFounded));
}

当我点击按钮时,我会收到此.json(这是我搜索的匹配请求的列表 - 基于参数内容给予输入):< / p>

[ {
  "id" : 13,
  "requestTitle" : "Titolo",
  "content" : "Richiesta",
  "creationDate" : "2017-06-23",
  "authorUsername" : "admin",
  "author" : null,
  "referencedTable" : {
    "id" : 3,
    "usersOnIt" : "",
    "name" : "Tavolo 1"
  }
}, {
  "id" : 14,
  "requestTitle" : "Voglio vedere Tiziano Ferro",
  "content" : "Mi piacerebbe vedere tiziano per fare ...",
  "creationDate" : "2017-06-25",
  "authorUsername" : "admin",
  "author" : null,
  "referencedTable" : {
    "id" : 4,
    "usersOnIt" : "alfa",
    "name" : "Tavolo 3"
  }
}, {
  "id" : 19,
  "requestTitle" : "Titolo",
  "content" : "Voglio vedere Marco",
  "creationDate" : "2017-06-26",
  "authorUsername" : "user",
  "author" : null,
  "referencedTable" : null
} ]

所以,我的最后一个问题是:如何将.json对象列表转换为html表? 我一直在网上搜索,但我一无所获,我希望有人会帮助我。

感谢您的时间建议, 曼努埃尔。

1 个答案:

答案 0 :(得分:0)

您可以在表单提交上调用函数,并在函数中的vm实例中获取json

<强> HTML

    <form class="navbar" ng-submit="vm.getJson()">
            <input style="margin-top: 2.8%; margin-right:2px;" class="btn" type="text" name="content" ng-model="vm.content" placeholder="Search requests..." />
            <input style="margin-top: 2.8%; margin-right:5px;" class="btn btn-primary" type="submit" text="Search" value="Search">
        </form>
    <tr ng-repeat="value in json"><td>{{value }}</td></tr>

<强> JS

vm.getJson=function(){
  $http.get("YourUrl",vm.content).then(function(response){
  vm.json=response.data;
 console.log(response);
})
}