[英]How to display inner child Boolean values a checkbox based on JSON structure?
[英]how to display a different text boolean json
在我的 json 文件中,我有 boolean,如果是真或假,我想顯示不同的文本示例:如果為真,則顯示“是”,否則在 ZFC35FDC70D5FC69D269883A822C7A53E 中顯示“否”。
我希望我很清楚
謝謝你
json.file
{
"boatType": "Semi-rigide",
"img": "/assets/img/boat-img/semi-rigide.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": false,
"annexe": true
},
組件.ts
export class TableComponent implements OnInit {
user: IBoat[] = [];
constructor(private boatService: BoatService) { }
ngOnInit(): void {
this.boatService.getBoat()
.subscribe(data => {
this.user = data
});
}
}
html
<tbody>
<tr *ngFor="let boat of user">
<td data-label="img"><img [src]="boat.img" alt="boat" class="img"></td>
<td data-label="longeur">{{boat.longeur}} cm</td>
<td data-label="largeur">{{boat.largeur}} cm</td>
<td data-label="tirant d'eau">{{boat.tirantEau}} cm</td>
<td data-label="equipage">{{boat.equipage}}</td>
<td data-label="annexe">{{boat.annexe}}</td>
</tr>
</tbody>
首先在 json 文件中創建一個名為 jsonData 的變量:
jsonData = {
"boatType": "Semi-rigide",
"img": "/assets/img/boat-img/semi-rigide.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": false,
"annexe": true
}
然后在頭部的腳本標簽中引用 json 文件
<head>
<!-- Other code -->
<script src="file.json">
</head>
然后解析json
var parsed = JSON.parse(jsonData)
現在您在這部分似乎有點模糊,您正在檢查哪個變量是真/假,所以我將為這兩個布爾值提供代碼。
parsed.equipage ? console.log("yes") : console.log("No")
// other code
parsed.annexe ? console.log("yes") : console.log("no")
如果您想直接更改頁面上元素的文本,只需執行
document.getElementById("id").innerText = "Yes"
如果您願意,可以替換為console.log()
。
如果我誤解了這個問題,請說希望這個答案對你有幫助:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.