Load a text file as a string in Ionic 2

Ionic Framework ionic-v3
1

Anyone know how to import a text file as a string in Ionic 2? I found this:

But I’m not sure how to use it, or if it’s even neccessary. I’m using Ionic 2.0.0-rc.3.

2

Hi @meatrobot

I like to use HTTP services to read asynchronously for me. Here’s how I import JSON data (you’ll need to change the res.json line to read in plain text … essentially, you get to skip the step of parsing).

  1. In your *.ts file, add these libraries…

    import { Http } from ‘@angular/http’;
    import ‘rxjs/add/operator/map’;

  2. Create a member var to hold the string

    public _robotOverlords: any[] = [];

  3. Make sure your constructor has an HTTP variable injected

    constructor(public navCtrl: NavController, public _http: Http) {
    …
    }

  4. Within the constructor, you’ll want to import the text file (again, for me, it’s JSON data)

    this._http.get(‘my/local/path/xyz.txt’).map(res => res.json()).subscribe(data => {
    this._robotOverlords = data;
    });

my/local/path/xyz.txt will need to be in the www folder. The full path would be

MyProject/www/my/local/path/xyz.txt

I think that since you don’t need to parse, you won’t need to import the rxjs map operator. So that’ll shorten your code further.

I hope that helps!

Ryan

3

1 other thing to note: if you store your text file locally – that is, in the www folder – you may need to create your own subfolder. I’m not certain if RC3 cleans the www folder every time you build, but the older versions did. Creating your own subfolder protects the data from being deleted (cleaned).

4

@ryanlogsdon Thanks a ton, this worked for me! I did in fact go down the http path, but had given up since I didn’t quite understand how http worked in Angular 2 and that I had to call subscribe(). Minor differences:

  • I only needed the first import, and not “rxjs/add/operator/map”
  • I’m loading an html file, so it was res.text() instead of res.json()
1 Like
5

Can you fans of using Http here explain why you prefer it to using webpack’s require?

6

Honest answer: http is the 1st way I read about when I started out.

Correct me, but I imagine that chaining function calls would not work with

readFile('my/path/to/file.txt').map(...)

so I’d have to write a little more code that way.

Plus, data subscriptions are elegant. :sunglasses:

7

It’s my understanding that Ionic 2 used webpack at one point, but no longer does?

8

Somewhere around Beta 12 or RC1, it switched from Webpack to Rollup.

Those were dark times.

RC2 or so migrated to Webpack2.

9

Hi @meatrobot!

I’m trying to load this in as well and had an error pop up in VSC when defining a data type for the data captured from my text file. Is it ok to leave this undefined? I assume by using res.text() that the data will auto append to string, at least VSC seems to think so…

Any chance I could get an example of your working ts and html files for reference? I’m trying to use ngFor to generate multiple slides from my text file but not sure how to go about doing this.

This thread has been a big help though, thank you all.