How to fetch data from json in Angular2 (TypeScript) without HTTP?

Question

I have task (auth): All data should be stored in LocalStorage. Application should be written without back-end languages or services You should create a json file with 10 test users and get it content while application forming. Save user to LocalStorage.

I create a json file with data of users, but i don't understand how to fetch it in my service.

{
  "Users": [
    {
      "Id": 1,
      "name": "FirstUser",
      "email": "[email protected]",
      "password": "test123"
    },
    {
      "Id": 2,
      "name": "2thUser",
      "email": "[email protected]",
      "password": "test123"
    }
  ]
}

I tried some tricks like

"import as data from '../shared/users.json' "const users = data.Users" (error on Users)

Do you have idea "how to" ?

Please check this angular.io/docs/ts/latest/guide/server-communication.html where demo application is loading data from .json file — Mohtisham Zubair
– Mohtisham Zubair, Commented Mar 8, 2017 at 12:30
and this the live plunkr for that embed.plnkr.co/?show=preview — Mohtisham Zubair
– Mohtisham Zubair, Commented Mar 8, 2017 at 12:32
@Mohtisham of course i saw that ... but my task require solution without server, as far as i understand — Максим Тарсис
– Максим Тарсис, Commented Mar 8, 2017 at 13:39

eko · Accepted Answer · 2017-03-08 11:33:11Z

1

I think it should be import * as data from '../shared/users.json but your system.config might add .ts or .js extension at the end of it.

The way I prefer to do it is to export it as a variable inside a ts file

export var data = {
  "Users": [
    {
      "Id": 1,
      "name": "FirstUser",
      "email": "[email protected]",
      "password": "test123"
    },
    {
      "Id": 2,
      "name": "2thUser",
      "email": "[email protected]",
      "password": "test123"
    }
  ]
}

then import that variable inside your component

import { data } from '../shared/users';

Full plunker example: http://plnkr.co/edit/CGtxYJkcjYt2cEzrbL00?p=info

edited Mar 8, 2017 at 11:33

answered Mar 8, 2017 at 11:17

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

6 Comments

Максим Тарсис Over a year ago

Of course, ts file better and more comfortable, but it's my technical task with "json data" ... about "import * as data from ...." i did that ... and add to system.configjs extension ...

Максим Тарсис Over a year ago

i forget, i'll test now. About this trick, i did all like there hackernoon.com/…

eko Over a year ago

@МаксимТарсис but you are missing the * be careful about that

Максим Тарсис Over a year ago

pp.userapi.com/c636321/v636321071/56991/Sie4ttIA_dE.jpg (error: Property "Users" does not exist on type 'typeof"*.json"' )

eko Over a year ago

@МаксимТарсис without http I don't think that'll be possible tbh :/

|

Collectives™ on Stack Overflow

How to fetch data from json in Angular2 (TypeScript) without HTTP?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related