提问人:muaish 提问时间:11/10/2023 更新时间:11/10/2023 访问量:35
获取两个 API 并需要集成它们
Fetching two APIs and need to integrate them
问:
目前我有两个获取 API。我需要用它渲染一个凹凸图。
import './styles/app.css';
import { BumpChart } from './bump-chart';
import { forEach } from 'core-js/features/array';
let bump_chart = new BumpChart();
if (!bump_chart.initialized) {
fetch('api/json')
.then(response => response.json())
.then(updatedSettings => {
bump_chart = new BumpChart(updatedSettings);
//console.log(bump_chart);
})
.catch(error => {
console.error('Error fetching JSON settings:', error);
});
bump_chart.initialized = true;
}
function fetchDataAndRender(selectedFile) {
const formData = new FormData();
formData.append('selectedFile', selectedFile);
console.log(bump_chart.initialized);
if (bump_chart.initialized) {
fetch('api/data/load', {
method: 'POST',
body: formData,
})
.then(r => r.json())
.then(d => {
const existingGraph = document.getElementById('chart');
if (existingGraph) {
existingGraph.innerHTML = '';
}
bump_chart = new BumpChart(d);
bump_chart.render();
})
.catch(error => {
console.error('Error loading data:', error);
});
}
}
document.getElementById('dataSelect').addEventListener('change', function (event) {
const selectedFile = document.getElementById('dataSelect').value;
fetchDataAndRender(selectedFile);
window.location.href = '#' + selectedFile;
});
window.addEventListener('DOMContentLoaded', function () {
const selectedFile = window.location.hash.slice(1);
if (selectedFile) {
const dataSelect = document.getElementById('dataSelect');
const allOptions = dataSelect.querySelectorAll('option');
allOptions.forEach((option) => {
const optionName = option.value;
if (optionName === selectedFile) {
option.setAttribute('selected', true);
} else {
option.removeAttribute('selected');
}
});
fetchDataAndRender(selectedFile);
}
});
window.onhashchange = function () {
location.reload();
};
这个想法是首先,检查图形是否已初始化。然后,获取配置(api/json),初始化它,获取数据(api/data/load)并呈现它。
在 fetch('api/data/load') 中,我需要“updatedSettings”将其注入到我的凹凸图中。我不知道怎么回事。我也不太明白,因为这是我第一次这样做。
答: 暂无答案
评论