获取两个 API 并需要集成它们

Fetching two APIs and need to integrate them

提问人:muaish 提问时间:11/10/2023 更新时间:11/10/2023 访问量:35

问:

目前我有两个获取 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”将其注入到我的凹凸图中。我不知道怎么回事。我也不太明白,因为这是我第一次这样做。

JavaScript symfony d3.js

评论


答: 暂无答案