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

what is the most effective method for integrating Vue with Express?

Issue with uncaught exceptions in promise rejection test

Can you identify the nature of the argument(s) used in a styled-component?

Transfer the parameter from ajax function to the aspx.cs file

Try enabling automatic status bar filling in Onsen UI when working with AngularJS

What is the necessary step to configure the "basedir" option for Jade in an Express application? (This option is essential for utilizing "extends" with absolute paths)

Error encountered while compiling ./node_modules/@material-ui/core/ButtonBase/ButtonBase.js

What is the best way to create a seamless Asynchronous loop?

Tips for transferring data via ajax to rails 3. The jQuery function is ensuring the string is properly handled

Unable to retrieve private field using a public getter method through a proxy

Unusual CSS rendering hiccup

A guide to entering information into an input field with JavaScript for logging in successfully

Can you explain the distinction between incorporating the Express GET method and HTTPS GET method in the provided code snippet?

Restricted Submission Request

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

Having trouble logging JSON data from nodejs + express while serving static files through express. However, I am able to see the data when I only make a GET request for the JSON data without the static files

Establishing communication between a master process and worker processes in Node.js: A guide to verifying bidirectional communication

Exploring and verifying data within an array in ReactJS

Running tests to check for next(err) functionality using supertest and Express JS