Guide on showing the content of an uploaded file as an object in JavaScript using file reader

When using the file upload function to upload a json file and read its contents, I am encountering an issue where the result is in string format instead of object. How can I display it as an object?

Here is my code:

.html

<div class="form-group">
      <input type="file" (change)="filechanged($event)" />
   </div>

.ts


filechanged(e){
       this.file = e.target.files[0];
       this.uploadDocument(this.file);
}

uploadDocument(file){
    let fileReader = new FileReader();
    fileReader.onload =(e) => {
      this.Name =  fileReader.result;
      console.log(typeof this.Name);
    };
    fileReader.readAsText(this.file);
}

I am currently receiving the output as a string rather than an object.

Answer №1

Utilize the JSON.parse method to parse the data string

  uploadDocument(file){
    let fileReader = new FileReader();
    fileReader.onload =(e) => {
      this.Name =  JSON.parse(fileReader.result);
      console.log(typeof this.Name);
    };
    fileReader.readAsText(this.file);
  }

Click here to experiment with the code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the ng-bootstrap carousel to fit within a div inside an ng-bootstrap modal

I have been struggling to correctly adjust the CSS properties in order to make a ng-bootstrap carousel image fit into a specific space (div) within a custom ng-bootstrap modal. Take a look at this modified StackBlitz code. In the provided example, the ima ...

Exploring location-based services using React-Redux

Seeking a deeper comprehension of redux and the react lifecycle methods. The issue I am facing involves a prop function within the componentDidMount that calls another function in redux. Within redux, I attempt to retrieve location data to set as the init ...

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

Retrieving a variable in a JavaScript function while a webpage is in the process of loading

Recently, I was working on writing Selenium test cases in C# and encountered an issue while trying to capture a value from a webpage. The problem arose when the retrieved value was rounded to 5 decimal points which was not what I wanted. Instead, I needed ...

Is there a simple method to automatically increase the version number of Mongoose documents with each update request?

I'm eager to utilize Mongooses document versioning feature with the "__v" key. Initially, I struggled with incrementing the version value until I learned that adding this.increment() when executing a query is necessary. Is there a method to have this ...

Tips for coding in Material-UI version 5: Utilizing the color prop in the Chip component by specifying

Is there a better way to type the MUI Chip prop color when the actual value comes from an object? Using any doesn't seem like a good option. Additionally, is keyof typeof CHIP_COLORS the correct approach for typing? import { Chip, Stack } from "@ ...

What steps can be taken to resolve the issue of being unable to rename an element in Typescript?

Why does VS code editor sometimes prevent me from renaming my typescript symbol using the f2 key? I keep encountering the error message "This element cannot be renamed." https://i.stack.imgur.com/mmqu9.png In some of my other projects, I am able to renam ...

The video element in my Angular application is not functioning properly in Safari

I am having an issue with playing a video in my angular app. It works perfectly in all browsers except for Safari : <video controls autoplay muted class="media"> <source src="https://my-site/files/video.mp4" type="video/mp4" /> </video& ...

Pull information from API and populate a dropdown menu in an Angular material select input

I am facing an issue with displaying data from an API in a mat select input field. I have tried to iterate over the data using a for loop but it is not working as expected. Can someone help me figure out how to properly populate the mat select input with d ...

How can a server retrieve a file uploaded using FormData and Ajax on a cross-domain upload?

my website is running on localhost:8084 and I need to upload a file to localhost:8086. Below is the JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("post", "http://localshot:8086"+ "?type=ajax",true); xhr.setRequestHeader("X-Reque ...

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?

I am in the process of tallying the frequency of each individual character within a given string and representing them as numbers. For example, let's consider the string "HelloWorld". HELLOWORLD There is one H - so 1 should be displayed with H remov ...

What is the proper way to reference an EJS function that is declared in a different EJS file?

document 1: jsfunction.ejs <% function testFunction() {return 42;} %> file 2: data.ejs <% include jsfunction.ejs %> <% testFunction(); %> result: ReferenceError: 1| <% include jsfunction.ejs %> >> 2| <% testFuncti ...

Unlock the mystery of identifying which trace is selected in the plot.ly JS legend

When using plot.ly, it is possible to set up a listener for legend click events. I am wondering how to determine which trace in the legend was clicked on. To provide a more specific example, let's say there are two traces (trace0, trace1) in a line gr ...

Turn off the wavy green underline in an Angular 2+ HTML template

Is there a way to remove the squiggly green line that appears while editing an Angular 2+ >= v2 (v2 or higher) project's HTML template, without altering the template itself? For example, consider the following line of code: <textarea [(ngModel) ...

XPath using JScript

I'm a beginner with Selenium and I'm curious about how the value in the text box is loaded when there's no value visible in the HTML tag: <input type="text" name="qty" id="qty" maxlength="5" value="" title="Qty" class="quantity-input qty ...

Navigate to the location using AngularJS elements in the JavaScript iframe1

Dealing with an issue while working on AngularJS. I am facing a frustrating problem where I am attempting to use one link to open links in two separate iframes. All aspects of this function correctly, except for the actual links. The issue arises when usin ...

Tips for updating the color, background, and height of the particle background using react-tsparticles

Is it possible to customize color and background in react-tsparticles? Below is an example of a particle configuration file named particle-config.js const particlesConfig = { background: { color: { value: "#232741", }, posi ...

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the ...

Issues with Angular RxJS handling Firebase JSON data correctly

Currently developing a CMS app, I am using the login button on Google Firebase to test fetching data. Upon using rxjs to properly return JSON data, I encountered an issue where it returns an odd object with some kind of token attached. Seeking assistance o ...