Styjun

How do I set an alias to a terminal line?

How does Powershell create fake drive labels in Windows?

How would modern naval warfare have to have developed differently for battleships to still be relevant in the 21st century?

Find the C-factor of a vote

Would it be a copyright violation if I made a character’s full name refer to a song?

Why change the size when print a object

How does metta sutra develop loving kindness

Can any NP-Complete Problem be solved using at most polynomial space (but while using exponential time?)

Hot coffee brewing solutions for deep woods camping

What is the origin of Scooby-Doo's name?

Is a single radon-daughter atom in air a solid?

Can we put equal sign after aggregate functions in sql?

What's currently blocking the construction of the wall between Mexico and the US?

In the Marvel universe, can a human have a baby with any non-human?

Require advice on power conservation for backpacking trip

Can ADFS connect to other SSO services?

If you snatch, I trade

Why the feminine "la" in "à la Leonardo DiCaprio", though he is a man?

Find the diameter of a word graph

How convert text to hex value?

Cascading Repair Costs following Blown Head Gasket on a 2004 Subaru Outback

How was Hillel permitted to go to the skylight to hear the shiur

Impossible darts scores

Suggested order for Amazon Prime Doctor Who series

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

Angular/RxJs When should I unsubscribe from `Subscription`Angular2: Retrieve FileReader result with a PromiseAngular 4 - BehaviourSubject not returning json data properlyLoop through JSON Object in Angular 5 and display in tableRetrive array of object from json array of object though http request typescript angular 5Angular 2+ ERROR TypeError: Cannot read property ''" of undefinedHow can I read the object (basically Json data) from the http,get in angular 6How to read a url from JSON file before invoking an http get service in Angular 6Angular -Populate a list from a file(JSON/XML/CSV)use of JSON data in ng2-charts

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

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.

angular typescript angular-in-memory-web-api

share|improve this question

edited Mar 25 at 9:53

tearswep

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

add a comment | 

0

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.

angular typescript angular-in-memory-web-api

share|improve this question

edited Mar 25 at 9:53

tearswep

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

add a comment | 

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.

angular typescript angular-in-memory-web-api

share|improve this question

edited Mar 25 at 9:53

tearswep

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

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

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);
 

angular typescript angular-in-memory-web-api

angular typescript angular-in-memory-web-api

share|improve this question

edited Mar 25 at 9:53

tearswep

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

share|improve this question

edited Mar 25 at 9:53

tearswep

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

asked Mar 25 at 9:35

tearsweptearswep

2588 bronze badges

2 Answers
2

active

oldest

votes

0

try this

 myReader.onloadend = function(e)
 var json = JSON.parse(myReader.result);
 json.forEach(element => 
 console.log(element.yourProperty);
 );
 

hope it helps

share|improve this answer

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This only helps me read each element from my file 1 by 1 ,but how do I communicate this data to my html?(because as it stands right now ,I am only printing data in console)
  
  – tearswep
  Mar 25 at 10:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What you mean by print out,do want to show it to the user ?
  
  – Ehsan Kiani
  Mar 25 at 10:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I edited my question , and yes -I want this data to be communicated to my html/service ,because I am using a service to deal with post/get/delete requests.
  
  – tearswep
  Mar 25 at 10:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for showing to user you can use table and then you can connect it to a service, this is a nice tutorial, hope it helps blog.angular-university.io/angular-material-data-table
  
  – Ehsan Kiani
  Mar 25 at 11:03
  

  
  
  
  

add a comment | 

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;
 

share|improve this answer

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55334823%2fread-data-from-json-xml-and-populate-a-list-in-angular%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

try this

 myReader.onloadend = function(e)
 var json = JSON.parse(myReader.result);
 json.forEach(element => 
 console.log(element.yourProperty);
 );
 

hope it helps

share|improve this answer

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This only helps me read each element from my file 1 by 1 ,but how do I communicate this data to my html?(because as it stands right now ,I am only printing data in console)
  
  – tearswep
  Mar 25 at 10:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What you mean by print out,do want to show it to the user ?
  
  – Ehsan Kiani
  Mar 25 at 10:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I edited my question , and yes -I want this data to be communicated to my html/service ,because I am using a service to deal with post/get/delete requests.
  
  – tearswep
  Mar 25 at 10:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for showing to user you can use table and then you can connect it to a service, this is a nice tutorial, hope it helps blog.angular-university.io/angular-material-data-table
  
  – Ehsan Kiani
  Mar 25 at 11:03
  

  
  
  
  

add a comment | 

0

try this

 myReader.onloadend = function(e)
 var json = JSON.parse(myReader.result);
 json.forEach(element => 
 console.log(element.yourProperty);
 );
 

hope it helps

share|improve this answer

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This only helps me read each element from my file 1 by 1 ,but how do I communicate this data to my html?(because as it stands right now ,I am only printing data in console)
  
  – tearswep
  Mar 25 at 10:51
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What you mean by print out,do want to show it to the user ?
  
  – Ehsan Kiani
  Mar 25 at 10:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I edited my question , and yes -I want this data to be communicated to my html/service ,because I am using a service to deal with post/get/delete requests.
  
  – tearswep
  Mar 25 at 10:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  for showing to user you can use table and then you can connect it to a service, this is a nice tutorial, hope it helps blog.angular-university.io/angular-material-data-table
  
  – Ehsan Kiani
  Mar 25 at 11:03
  

  
  
  
  

add a comment | 

try this

 myReader.onloadend = function(e)
 var json = JSON.parse(myReader.result);
 json.forEach(element => 
 console.log(element.yourProperty);
 );
 

hope it helps

share|improve this answer

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

 myReader.onloadend = function(e)
 var json = JSON.parse(myReader.result);
 json.forEach(element => 
 console.log(element.yourProperty);
 );
 

share|improve this answer

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

answered Mar 25 at 10:07

Ehsan KianiEhsan Kiani

1,08355 silver badges1313 bronze badges

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;
 

share|improve this answer

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

add a comment | 

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;
 

share|improve this answer

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

add a comment | 

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;
 

share|improve this answer

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

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

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

 else
 return;
 

share|improve this answer

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges

answered Mar 25 at 10:52

Bhagwat TupeBhagwat Tupe

71733 silver badges1919 bronze badges