-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.js
123 lines (106 loc) · 4.23 KB
/
search.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
fetch('convert.json')
.then(response => response.json())
.then(data => {
const searchinput = document.getElementById('inputbar');
const searchwrapper = document.querySelector('.search-input');
const resultwrapper = document.querySelector('#searchResults');
const tableWrapper = document.querySelector('.table-wrapper');
let results = [];
searchinput.addEventListener('keyup', (e) => {
results = [];
let input = searchinput.value;
if (input.length) {
results = data.filter(item => item.schemeName.toLowerCase().includes(input.toLowerCase()));
}
renderResults(results);
});
document.addEventListener('click', (e) => {
const target = e.target;
if (!searchwrapper.contains(target)) {
searchwrapper.classList.remove('show');
resultwrapper.innerHTML = '';
}
});
function renderResults(results) {
if (!results.length) {
searchwrapper.classList.remove('show');
resultwrapper.innerHTML = '';
} else {
let content = results.map((item) => {
return `<li><a href="#" data-scheme="${item.schemeCode}">${item.schemeName}</a></li>`;
}).join('');
console.log(content);
searchwrapper.classList.add('show');
resultwrapper.innerHTML = `<ul>${content}</ul>`;
// Add event listeners to each search result link
const resultLinks = resultwrapper.querySelectorAll('a');
resultLinks.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
const schemeCode = link.getAttribute('data-scheme');
fetchSchemeData(schemeCode);
});
});
}
}
function fetchSchemeData(schemeCode) {
const apiUrl = `https://api.mfapi.in/mf/${schemeCode}`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
const metaData = data.meta;
const schemeData = data.data;
// Clear previous table data
tableWrapper.innerHTML = '';
// Create the table
const table = document.createElement('table');
table.classList.add('data-table');
// Create table header
const tableHeader = document.createElement('thead');
const headerRow = document.createElement('tr');
const headerCols = ['Date', 'Net Asset Value'];
headerCols.forEach((col) => {
const headerCol = document.createElement('th');
headerCol.textContent = col;
headerRow.appendChild(headerCol);
});
tableHeader.appendChild(headerRow);
table.appendChild(tableHeader);
// Create table body
const tableBody = document.createElement('tbody');
if (schemeData.length === 0) {
const emptyRow = document.createElement('tr');
const emptyCell = document.createElement('td');
emptyCell.colSpan = headerCols.length;
emptyCell.textContent = 'No data available';
emptyRow.appendChild(emptyCell);
tableBody.appendChild(emptyRow);
} else {
schemeData.forEach((item) => {
const row = document.createElement('tr');
const dateCell = document.createElement('td');
const navCell = document.createElement('td');
dateCell.textContent = item.date;
navCell.textContent = item.nav;
row.appendChild(dateCell);
row.appendChild(navCell);
tableBody.appendChild(row);
});
}
table.appendChild(tableBody);
tableWrapper.appendChild(table);
})
.catch(error => {
console.log('Error fetching scheme data:', error);
});
}
});
// Add event listener to the Clear button
const clearButton = document.getElementById('clearButton');
clearButton.addEventListener('click', clearTable);
function clearTable() {
const tableWrapper = document.querySelector('.table-wrapper');
const searchInput = document.getElementById('inputbar');
tableWrapper.innerHTML = '';
searchInput.value = '';
}