Read data from .json/.xml and populate a list in Angular

Question

I'm setting up a CRUD App in Angular as part of my learning curriculum,and wand to populate my list from a file(that will accept .json /.xml format).I've managed to read from file and print in console ,but I don't know how to communicate with my template and service that will ultimately process and print out my desired output.

So far I've followed this guide https://www.youtube.com/watch?v=3zpdnujI_B0. This is the final repository for the code: https://github.com/michaelcheng429/angular-tutorial .I skipped the animation part as it's not something I want to learn for now.(right now I have a service that's reading from a in-memory-web-api and that service helps with my http request for create/read/update/delete functionalities)

In product.component.html I have my input type that accepts json and xml:

<div>
    Select file:
    <input type="file" accept='.json,.xml' (change)="changeListener($event)">
</div>

As for the reading part , I have used FileReader thats being called on change(inside products.component.ts):

changeListener($event) : void {
    this.readThis($event.target);
  }

  readThis(inputValue: any) : void {
    var file:File = inputValue.files[0]; 
    var myReader:FileReader = new FileReader();

    myReader.onloadend = function(e){
      console.log(myReader.result);
    }

    myReader.readAsText(file);
 }

I don't know how to communicate my information with product service/template and handle the difference between json format and xml format when it comes to reading from file.

Bhagwat Tupe · Accepted Answer · 2019-03-25 10:52:12Z

0

You can check by file type
here you have declare var file:File = inputValue.files[0]; In these file variable you can get all file information, you just need to check here

    if(file && file.type === 'text/xml'){

    }else if(file && file.type === 'application/json'){

    }else{
        return;
    }

answered Mar 25, 2019 at 10:52

Bhagwat Tupe

1,9631 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Read data from .json/.xml and populate a list in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related