Retrieving information from a .json file using TypeScript

Question

Retrieving information from a .json file using TypeScript

I am facing an issue with my Angular application. I have successfully loaded a .json file into the application, but getting stuck on accessing the data within the file. I previously asked about this problem but realized that I need help in specifically understanding how to access the data in a file that has already been uploaded and recognized as an application/json file by my application.


        startUpload(event: FileList){
            var file = event.item(0);
            console.log(file)
        }

console output


        File(139404) {name: "turnaroundtest.json", lastModified: 1527392751758, lastModifiedDate: Sat May 26 2018 20:45:51 GMT-0700 (PDT), webkitRelativePath: "", size: 139404}

json angular typescript

Answer 1

Answer №1

To accomplish this task, follow these steps:

  checkFiles(e) {
    const selectedFiles = e.target.files;
    if (e.target.files && e.target.files[0]) {
      const filereader = new FileReader();
      filereader.onload = ((evt) => {
        const dataResult = evt.target['result'];
        console.log(JSON.parse(dataResult));
      });
      filereader.readAsText(e.target.files[0]);
    }
  }

Answer 2

To accomplish this task, follow these steps:

  checkFiles(e) {
    const selectedFiles = e.target.files;
    if (e.target.files && e.target.files[0]) {
      const filereader = new FileReader();
      filereader.onload = ((evt) => {
        const dataResult = evt.target['result'];
        console.log(JSON.parse(dataResult));
      });
      filereader.readAsText(e.target.files[0]);
    }
  }

Answer 3

Answer №2

give this a shot.

console.log('title' + data.title);

or

if (undefined !== responseData.title && null !== responseData.title){
    console.log('title' + responseData.title);
}

in case you are dealing with an array of json objects

for (const dataObject in responseData) {
    if (undefined !== responseData[dataObject].title && null !== responseData[dataObject].title) {
        console.log('title' + responseData[dataObject].title);
    }
}

Answer 4

give this a shot.

console.log('title' + data.title);

or

if (undefined !== responseData.title && null !== responseData.title){
    console.log('title' + responseData.title);
}

in case you are dealing with an array of json objects

for (const dataObject in responseData) {
    if (undefined !== responseData[dataObject].title && null !== responseData[dataObject].title) {
        console.log('title' + responseData[dataObject].title);
    }
}

Retrieving information from a .json file using TypeScript

Answer №1

Answer №2

Similar questions

Router navigation does not trigger LifeCycle calls

Seeking a quick conversion method for transforming x or x[] into x[] in a single line of code

Fixing the forwardRef issue with react-router-dom and material-ui

Include a fresh attribute within the existing JSONArray

npm unable to locate a JavaScript file

Bypassing disputes in a TypeScript function

Using Angular 6 pipes can simplify observable operations by eliminating the need for explicit typing

Unable to display animation without first launching it on Rive web

What is the method for sending a Post request using the "content type" value of "application/x-www-form-urlencoded"?

Tips for retrieving data from Angular Material Table source

What is the process for implementing a version folder for my @types/definition?

Unable to access /route upon refreshing page in Angular 7

The error message "Property 'map' is not found on type 'User' in React with typescript"

"Utilizing variadic tuple types to implement the pipe function in TypeScript 4: A step-by-step guide

Exploring Angular 2: How to Retrieve the Value of a Radio Button

I am interested in utilizing python-shell for handling json data, however, I am encountering issues with the python module

Enhancing UI-Grid: Implementing Dynamic Field Addition in the Header Name Section

Revising a conceivably intricate template

Error message: An unhandled TypeError occurs when attempting to access properties of an undefined object (specifically, the 'then' property) while refreshing the token using axios

The input of 'Response' does not match the expected type of 'string'