I am looking to incorporate a basic local JSON file into my Angular 7 project and utilize the data within my HTML file. Just a straightforward example. The JSON file is named data.json. I aim to retrieve the information from this JSON file in app.component.html instead of using {{item}}
app.component.ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('detailsPanel') details;
@ViewChild('displayDetails') displayDetails;
// Need to access this data from a JSON file
title = 'dragNdrop';
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
'Check e-mail',
'Walk dog'
];
elementDetails = "";
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
showDetails(text){
this.elementDetails = text;
}
}
app.component.html
<div class="container-fluid" style="padding: 2%;">
<div class="row">
<div class="col-md-3">
<h2>Drag and Drop</h2>
</div>
</div>
<div class="row">
<div class="col-md-3" style="border-right: 1px solid black; height: 100%;">
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
</div>
<div class="col-md-6">
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
class="example-list" (cdkDropListDropped)="drop($event)">
<p #detailsPanel class="example-box" *ngFor="let item of done" (click)="showDetails(detailsPanel.innerText)" cdkDrag>{{item}}</p>
</div>
</div>
data.json
{
"list1": [
"A",
"B",
"C",
"D"
]
}