In my json file I have boolean and I want to display different texts if it's true or false example: if true show 'yes' else show 'no' in html.
I hope I was clear
thank you
json.file
{
"boatType": "Semi-rigide",
"img": "/assets/img/boat-img/semi-rigide.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": false,
"annexe": true
},
component.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>
First create a variable called jsonData in your json file:
jsonData = {
"boatType": "Semi-rigide",
"img": "/assets/img/boat-img/semi-rigide.jpg",
"longeur": 10,
"largeur": 20,
"tirantEau": 50,
"equipage": false,
"annexe": true
}
Then reference the json file in your script tag in the head
<head>
<!-- Other code -->
<script src="file.json">
</head>
Then parse the json
var parsed = JSON.parse(jsonData)
Now you seem a little vague around this part which variable you are checking if true/false so I'll provide code for the two booleans.
parsed.equipage ? console.log("yes") : console.log("No")
// other code
parsed.annexe ? console.log("yes") : console.log("no")
If you wanted to change directly an element's text on the page simply do
document.getElementById("id").innerText = "Yes"
And substitute for console.log()
if you wish.
If I have misinterpreted the question just say Hope this answer helped you:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.