我正在开发一个简单的Web应用程序来查看所有项目并按名称搜索项目。为此，我创建了类似这样的类图。对于后端，我使用Typescript/JS，对于前端，我使用html。
我想做这些参议员：
1.打开浏览器时显示所有项目。
1.在浏览器中有搜索文本框。所以如果我在那里输入任何东西，我想从JSON文件过滤数据。
这是我的JSON文件
{
"projects": [
{ "id": 1, "name" : "Project 1" },
{ "id": 2, "name" :"Command 2" },
{ "id": 3, "name" :"Project 3" },
{ "id": 4, "name" :"Project 4" },
]
}我已经为此创建了简单的类图：
之后，我创建了一些类，但我不知道这些是正确的或不。
class Project {
private id?: number;
private name?: string;
}
class ProjectFactory {
getAllProjects(){
}
searchProject(){
}
}//需要在项目中添加JSON文件. JSON文件'
HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="product.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Embla - Product Management Software</a>
<img src="/images/img_avatar.png" alt="Avatar" class="avatar">
</div>
</nav>
<br>
<input class="form-control" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table class="table" id="myTable">
<thead class="table-dark">
<tr>
<th style="width:50%;">Id</th>
<th style="width:50%;">Project Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Project 1</td>
</tr>
<tr>
<td>2</td>
<td>Command 2</td>
</tr>
<tr>
<td>3</td>
<td>Project 3</td>
</tr>
<tr>
<td>4</td>
<td>Project 4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>在这里，我只是想验证如何为上述场景正确编写Typescript类，以及如何将Typescript/JS文件连接到html，以及如何使用get方法将JSON文件中的数据传送到Typescript类。
这里我也添加了示例代码。但我想知道如何从JSON文件中获取并显示在视图中。以及搜索也。
class Project {
id!:number;
name!:string;
constructor(id:number, name:string) {
this.id=id;
this.name=name;
}
}
class ProjectFactory {
// Example of method
getName() : string {
let p = new Project(1, "A");
return p.id + " "+ p.name
}
}
let project = new ProjectFactory();
console.log(project.getName());
1条答案
按热度按时间t1qtbnec1#
让我们把你的问题分成几部分。
"id"和"name"1.假设您的JSON托管在服务器use fetch requests in Typescript to get the object上，如下所示：
这段代码很粗糙，如果定义JSON的类型而不是
'any'，会很有帮助。