Блог

У меня есть 4 API, и мне нужно извлекать детали и сохранять их на гистограмме в соответствии с именем (имя по оси x и детали по оси y, 4 столбца для каждого имени): результат API показывает следующие детали:

API 1: Ontime

  [
    {
        "Name": "Apoorva",
        "Ontime": 3
    },
    {
        "Name": "Rani",
        "Ontime": 2
    }
]
  

API 2: ожидание

 [
{
    "Name": "Rani",
    "Pending": 4,
},
{
   "Name": "Anshu",
   "Pending" : 3,
}
  

]
API 3: завершено с задержкой

 [
    {
        "Completed with Delay": 1,
        "Name": "Sania"
    }
     {
        "Completed with Delay": 2,
        "Name": "Rani"
    }
    
]
  

API 4 просрочен

 [
   {
        "Overdue": 1,
        "Name": "Anshu"
    }
]
  

Теперь во внешнем интерфейсе у меня были статические данные, но я хочу передать данные JSON, возвращаемые из api, может кто-нибудь, пожалуйста, рассказать, как вызывать API и сохранять данные в графике.

Ниже приведен статический код для того же:

  const data = {
datasets: [
  {
    backgroundColor: colors.blue[200],
    data: [18, 21, 19, 27, 30],
    label: 'Pending'
  },
  {
    backgroundColor: colors.green[500],
    data: [12, 21, 12, 24, 26 ],
    label: 'Completed On Time'
  },
  {
    backgroundColor: colors.red[300],
    data: [4,3,4,5,6],
    label: 'Overdue'
  },
  {
    backgroundColor: colors.orange[500],
    data: [2,2,1,2,3],
    label: 'Completed with Delay[![enter image description here][1]][1]'
  },
 

],
labels: ['Apoorva', 'Rani', 'Anshu', 'Sania']
  

};

Я хочу, чтобы данные отображались в соответствии с API и отображались на графике.

Существует еще один API, который извлекает имена (метки):

 [
    "Apoorva",
    "Anshu",
    "Rani",
    "Sania",
    "Elle"
]
  

Код Axios:

  const [rm, setRm] = useState([]);


const [ontime, setOntime] = useState([]);
  const [pending, setPending] = useState([]);
  const[delay,setDelay] = useState([]);
  const[overdue,setOverdue] = useState([]);
  const rmtlid = `200000`;
  //Fetches the names (labels) - ["Apoorva","Anshu","Rani","Sania","Elle"]
  useEffect(() => {
    RMService.showRMSUnderMe(`${rmtlid}`)
      .then((res => {
        setRm(res.data);
      }))

      .catch(error => {
        console.log(error);
      })
  }, []);
  //Fetches the name and the onTime count (API 1)
  useEffect(() => {
    RMService.showOnTime(`${rmtlid}`)
      .then((res => {
        setOntime(res.data);
      }))

      .catch(error => {
        console.log(error);
      })
  }, []);
  //Fetches the name and the count of Completed with Delay - API 3
  useEffect(() => {
    RMService.showCompletedwithDelay(`${rmtlid}`)
      .then((res => {
        setDelay(res.data);
      }))

      .catch(error => {
        console.log(error);
      })
  }, []);
 ////Fetches the name and the count of Overdue  - API 3
  useEffect(() => {
    RMService.showOverdue(`${rmtlid}`)
      .then((res => {
        setOverdue(res.data);
      }))

      .catch(error => {
        console.log(error);
      })
  }, []);
  

Теперь, как мне сопоставить данные, полученные из api (выходные данные, приведенные выше), с «данными», которые зададут график.

Пожалуйста, помогите, заранее спасибо 🙂 Я не могу понять, как хранить значения и отображать их в соответствии с именами.

Вы можете использовать axios. Axios — это библиотека для упрощения HTTP-запросов. Прежде всего, вам нужно проверить документы API, чтобы узнать, как извлекать их данные.

Извините за поздний ответ.

Я вижу, что данные из вызовов API, которые вы оставили включенными:

• ontime
• pending
• delay
• overdue

Вы присвоили данные, которые вы извлекли, указанным выше переменным соответственно. Я бы посоветовал вам консоль.запишите, что вы получили обратно.

пример:

 console.log(ontime)
  

Для отображения массивов вы можете использовать «map» или «forEach», это современные методы массива javascript.

Вот один пример взаимодействия с массивом и возврата элемента списка для каждого элемента в массиве:

 mayArray.map(item => <li>{{ item }}</li>
  

Вы можете проверить документы de здесь для map:
MDN — карта

Здесь для forEach: MDN — forEach