I am struggling with utilizing the data that has been fetched in JavaScript. Despite successfully retrieving the data, I am facing difficulties in effectively using it in

Question

I am struggling with utilizing the data that has been fetched in JavaScript. Despite successfully retrieving the data, I am facing difficulties in effectively using it in

I am facing an issue where I am unable to utilize the data after fetching it from a local JSON file. Below are the screenshots showcasing the problem: Here is the data displayed in the console: Here is the code snippet:


fetch('api_link.json')
.then((res) => res.json())
.then((data) => {
    console.log('data:', data);
  })

export const project_info = () => async (dispatch) => {
  try {
    dispatch({ type: PROJECT_INFO_REQUEST });

    var { data } = await axios.get('HERE I WANT TO PUT THE DATA FROM THE JSON FILE');

    dispatch({
      type: PROJECT_INFO_SUCCESS,
      payload: data,
    });

Additionally, here is another screenshot for clarification. Can anyone provide assistance with this issue? #note I am a Python backend developer :) This is my first time working with React JS.

javascript json

Answer 1

Answer №1

Scope of function arguments is limited to the function itself and cannot be accessed from outside the function.

It's worth noting that there is no guarantee that the network request will be resolved before calling the project_info function.

To ensure that the promise returned from fetch is accessible within the project_info function, save it in a variable.

const api_data = fetch('api_link.json')
    .then((res) => res.json())

export const project_info = () => async (dispatch) => {
            try {
                dispatch({
                    type: PROJECT_INFO_REQUEST
                });

                const url = await api_data;

                var {
                    data
                } = await axios.get(url);

                dispatch({
                    type: PROJECT_INFO_SUCCESS,
                    payload: data,
                });

It's important to note that axios and fetch serve the same purpose as APIs. It's better not to mix them.

Answer 2

Scope of function arguments is limited to the function itself and cannot be accessed from outside the function.

It's worth noting that there is no guarantee that the network request will be resolved before calling the project_info function.

To ensure that the promise returned from fetch is accessible within the project_info function, save it in a variable.

const api_data = fetch('api_link.json')
    .then((res) => res.json())

export const project_info = () => async (dispatch) => {
            try {
                dispatch({
                    type: PROJECT_INFO_REQUEST
                });

                const url = await api_data;

                var {
                    data
                } = await axios.get(url);

                dispatch({
                    type: PROJECT_INFO_SUCCESS,
                    payload: data,
                });

It's important to note that axios and fetch serve the same purpose as APIs. It's better not to mix them.

I am struggling with utilizing the data that has been fetched in JavaScript. Despite successfully retrieving the data, I am facing difficulties in effectively using it in

Answer №1

Similar questions

The jstree does not seem to be generating the tree structure as expected based on

Convert a Ruby string into a JSON formatted string

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

Check if a specific string is present in an array using JavaScript

Create an XML file with recurring elements based on JSON data

Scale up the font size for all text on the website uniformly

Pressing "Enter" initiates the submission of the form

Creating a function that writes to a file by utilizing the data input from

Steps for configuring mode as 'open' when generating a shadow element with vue-custom-element

Guide on transferring object between two $states using ui-router

what strategies can be implemented to prioritize addressing validation errors in return forms

Create a project in asp.net core API that allows for CRUD operations using JSON and static data

I can't understand why my server is displaying an error on the browser stating "This site can't be reached ERR_UNSAFE_PORT" while it is functioning flawlessly on the terminal

Struggling with an issue in React and Bootstrap4 while developing an application with create-react-app

issue with react prop causing my function to function in one scenario but fail in another

Strategies for dynamically altering Vue component props using JavaScript

Select2 is throwing an error that says "Unidentified problem with property 'results'."

Why is it necessary to type in localhost in the address bar when using node.js and socket.io instead of simply opening the client.html file directly?

Ways to center vertically aligned buttons within cards in a React application with Material-UI

Issue with ServiceStack GET action resulting in a null object being returned