Utilizing EJS to display dynamic data from a JSON file in a visually appealing D

Question

Utilizing EJS to display dynamic data from a JSON file in a visually appealing D

*Excited about learning express!

Currently, I have two files - index.ejs and script.js.

The script I've written successfully fetches JSON data from an api.

const fetch = require("node-fetch");
const url = '...'

fetch (url)
    .then(response => {
        return response.json()
    })
    .then(data =>{
    console.log(data)
    })
    .catch(err => {
    })

I'm wondering how to utilize the fetched JSON data to create a chart using d3 on my index page.

Although I've done some research, I'm still feeling uncertain. Any guidance would be greatly appreciated! Thank you.

javascript express d3.js ejs

Answer 1

Answer №1

After some discussion in the comments, it was determined that the issue stemmed from using a server implemented in the Express framework of Node.js.

In an Express application, to retrieve data from an API and send it to the frontend, you can utilize the res.send method.

const fetch = require("node-fetch");
const url = '...'

fetch(url)
    .then(response => {
        return response.json()
    })
    .then(data =>{
    console.log(data)
     res.send(data)
    })
    .catch(err => {
    })

To access this API on the frontend, follow the example below:

const getData = async () => {
  try {
    const response = await fetch(url) // Example: http://localhost:6000/api/getChartData
    if(response.ok){
      const body = await response.json()
      console.log(body)
      // Perform actions like creating a D3 chart once data is received
      return
    }
    const customError = {
      message: 'Something went wrong'
    }
    throw customError
  } catch(error){
    console.log(error)
    // Store the error in a variable and display it on the UI to inform the user of any errors
  }
}

Answer 2

After some discussion in the comments, it was determined that the issue stemmed from using a server implemented in the Express framework of Node.js.

In an Express application, to retrieve data from an API and send it to the frontend, you can utilize the res.send method.

const fetch = require("node-fetch");
const url = '...'

fetch(url)
    .then(response => {
        return response.json()
    })
    .then(data =>{
    console.log(data)
     res.send(data)
    })
    .catch(err => {
    })

To access this API on the frontend, follow the example below:

const getData = async () => {
  try {
    const response = await fetch(url) // Example: http://localhost:6000/api/getChartData
    if(response.ok){
      const body = await response.json()
      console.log(body)
      // Perform actions like creating a D3 chart once data is received
      return
    }
    const customError = {
      message: 'Something went wrong'
    }
    throw customError
  } catch(error){
    console.log(error)
    // Store the error in a variable and display it on the UI to inform the user of any errors
  }
}

Utilizing EJS to display dynamic data from a JSON file in a visually appealing D

Answer №1

Similar questions

onload function prevents further URL redirection

Angular appears to be having trouble with localStorage functionality

Combining various queries into a single JSON object compared to executing multiple queries individually

Obtaining the value of an item in an unordered list

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

How to iterate dynamically over arrays using JavaScript

Guidance on exporting an Excel file from an HTML table, excluding the final row, using JavaScript

React and React Native not synchronizing with authentication context

New Relic identifies mysterious delays caused by MongoDB's findOne method

Vue3 and Ionic combined to create a Component that became a reactive object in Vue

Eliminating certain buttons within Ember-leaflet-draw

Using async/await in React.js to handle API calls results in a

How can I effectively separate the impact of Next.js onChange from my onClick function?

The functionality of Angular Views is experiencing issues

Enhance the user experience with a personalized video player interface

The Value of Kendo Data

Avoid reloading the page when the form is submitted using form.trigger('submit') command

Extending State Interface in ReactJs and Typescript: A Step-by-Step Guide

JQuery mishandles its left positioning

Mongoose failing to retrieve complete data set