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

Question

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

我测试了来自 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>

我的“navbarController.js”是这样的:

(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(“RequestResource.java”)是这样的:

@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(这是我搜索的匹配 Request 的列表 - 基于输入中给出的参数 content):

[ {
  "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 表？ 我在网上搜索了很多，但一无所获，我希望有人能帮助我。

感谢您抽出时间提供建议， 曼努埃尔。

Answer 1

您可以在表单提交上调用函数，并在函数内的 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);
})
}