Question 53222 in Javascript Question posted in
A very good W3school tutorial can be found here.

Unable to read json file from a .js script within ionic framework – Javascript

I have been trying to simply read a json file within a .js script in an ionic framework. My repository file structure is as per the following:

- public/...
- resources/...
- src/
  - components/...
  - pages/
     - Tab1.css
     - Tab1.tsx
  - utils
     - configs/config.json
     - utils.js
     - require.js

When I debug, I load an object from utils.js called by Tab1.tsx. The debugger successfully goes into the utils.js and calls "read_json" function as part of object creation, which looks like this:

export function read_json(){
    let json_data = fetch('./configs/config.json')
        .then((response) => response.json())
        .then((json) => console.log(json));
    console.log(json_data)
}

I get the following result: Promise {[[PromiseState]]: 'pending', [[PromiseResult]]: undefined}. I tried using the "await" function and the result was the same. I also tried using the require(‘./configs/config.json’), but then got error message Uncaught ReferenceError ReferenceError: require is not defined despite having a require.js in my structure.

When I was loading the json outside of ionic framework, I did not have this issue. Could someone help?

Tags:

2

Answers


  1. 0

    This returns a promise that resolves as a Response object

    fetch('./configs/config.json')

    This returns a promise that resolves as the result of parsing the JSON from the response body

    .then((response) => response.json())

    This logs the JavaScript object/array/other value that you get from parsing the JSON (it doesn’t log JSON, you parsed in in the previous step!) and then returns a promise that resolves as the return value of console.log(...) which is undefined and not what you want

    .then((json) => console.log(json));

    Using then to do this you would want:

    then( (value) => {
    console.log(value);
    return value;
});

    Then you log the promise object:

    console.log(json_data)

    I tried using the "await" function

    Your attempt to use it probably failed because of console.log returning undefined as mentioned above.

    await is a keyword, not a function. Using it to handle all your promises instead of mixing it with then makes life much easier.

    const response = await fetch('./configs/config.json');
const value = await response.json();
console.log(value);

    This all assumes that your URL is right. Generally the contents of src doesn’t contain data served by a web server and you’d want to store the .json`` file under public`.

    then got error message Uncaught ReferenceError ReferenceError: require is not defined despite having a require.js in my structure

    You are using ECMAScript modules (using import/export) not CommonJS modules (which are Node.js’ default module format and which work with a function named require) and also not AMD modules (which are what Require.JS uses, and which also use a function named require but not one that is compatible with CommonJS modules).

    Login or Signup to reply.
  2. 0

    You should return the value. Use this code

          export async function read_json(){
                let json_data =await fetch('./configs/config.json')
                    .then((response) => {
                    console.log(response.json());
                   return response.json();
})
                console.log(json_data);
               return json_data;    
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search