Question

我正在使用Angular前端和Java后端创建一个应用程序，我想显示来自后端（json）的数据，我该怎么办？

我在Java代码中创建了一个arrayjson，然后在具有servlet的JSP页面上（在localhost8080上）显示该数组。然后，我在我的打字稿中获取了一个http来获取数组，最后我在html中使用ngfor显示了数据。

Java创建json数组：

public static JsonArray afficherClients() {
    MongoCollection<Document> collection = MongoMain.getDB().getCollection("Clients");

    FindIterable<Document> iterDoc = collection.find();
    Gson gson = new Gson();
    Iterator<Document> it = iterDoc.iterator();
    JsonArray array = new JsonArray();

    while (it.hasNext()) {
        array.add(gson.toJson(it.next()));
    }
    System.out.println(array);
    return array;
}

在服务器上显示：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");  
    request.setAttribute("someData", Clients.afficherClients());
    RequestDispatcher dispatcher = request.getRequestDispatcher("test.dispatcher.forward(request, response);  
}

前端的打字稿获取数据：

clients: Clients[] = [];

constructor(private http: HttpClient) { }

ngOnInit() {
    this.http.get<Clients[]>("http://localhost:8080/my-app/test").subscribe(result => {
        this.clients = result;
    }, error => alert("Erreur"));
}

显示整个数组的HTML：

<ul class="list-group-item-heading" *ngFor="let client of clients; let i = index">
    {{ client }}
</ul>

我的代码可以得到这种结果：

{\“ timestamp \”：1557130609，\“ machineIdentifier \”：11848616，\“ processIdentifier \”：5812，\“ counter \”：8628551}，\“ nomEntreprise \”：\“ test \”，\ “ rue \”：\“ test \”，\“ codePostal \”：\“ test \”，\“ ville \”：\“ test \”，\“ titre \”：\“ test \”，\“ nom \“：\”测试\“，\” prenom \“：\”测试\“，\”电话\“：\”测试\“，\”电子邮件\“：\”测试\“}”]

我在数组中仅创建了1条记录。

但是我只想在HTML中显示名称或电子邮件，例如{{client.email}}，但不起作用。

因此，我希望使用类似（此示例的名称+昵称）：

测试测试

并非所有数据。

Answer 1

您可以轻松调试，使用* ngFor检查输出。只需添加html：

{{ clients | json }}

如果您发现json格式正确，则可以将代码编写为：

Answer 2

https://json.org/example.html
"{\"timestamp\":1557130609,\"machineIdentifie...."

如以上摘录所示，您的代码带有斜线。 JSON格式不正确。

如何使用http从Java后端在Angular中显示一些数据

2 个答案: