Angular: pass JSON data to child component

Question

I have a paragraph and app component, and a JSON file:

app component:


    //app.component.ts
    import { Component, OnInit } from '@angular/core';
    import * as data from 'JsonDataSample1.json'

    @Component({
      selector: 'app-root',
      template: `<app-paragraph [value]='json.caseFileID'></app-paragraph>`,
    })


    export class AppComponent{
      json = data
      title = 'af-bifurcated';
    }

paragraph component:


    //paragraph.component.ts
    import { Component, Input } from '@angular/core';

    @Component({
      selector: 'app-paragraph',
      template: `{{ value }}`,
      styleUrls: ['./paragraph.component.css']
    })
    export class ParagraphComponent {

      @Input() value: string;
    }

JSON:


    {
        "caseFileID": "1234567",
        "pdaSubmitterEntity": "Submitter 1",
        "propertyDataCollectorName": "Data Collector 1",
        "propertyDataCollectorType": "APPRAISER",
        "stateCredentialID": "007",
        "licenseState": "CA",
        "licenseExpiration": "09\/18\/2019"
    }

When I try to pass the imported JSON object to the child component, nothing displays. But if instead of importing the JSON, I copy it and hardcode the value of json as equal to whatever I copy from the file, the code works. What am I doing wrong here? Why can't I pass the imported JSON?

UPDATE

I have found that in order to get the JSON file properly imported I had to add the following to my tsconfig.json:


    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        ...
    }

This question has already been asked and answered: stackoverflow.com/questions/46110342/… — Katya Pavlenko
– Katya Pavlenko, Commented Sep 14, 2019 at 5:37
I have applied what was recommend as the solution in that question, but it has not helped. — Luke Berg
– Luke Berg, Commented Sep 14, 2019 at 7:16
If you have found a solution by yourself, post is an an answer and mark it correct please — Katya Pavlenko
– Katya Pavlenko, Commented Sep 15, 2019 at 6:44

Naga Sai A · Accepted Answer · 2019-09-14 04:29:48Z

1

To achieve expected result, use correct path jsondatasample1.json file

   import * as data from './JsonDataSample1.json'

Sample working code for reference- https://stackblitz.com/edit/angular-f1hxf9?file=src/app/app.component.ts

answered Sep 14, 2019 at 4:29

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

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

4 Comments

Luke Berg Over a year ago

I copied that file structure and code exactly, still nothing. I am on Angular 8.2.6

Naga Sai A Over a year ago

i shared example with json in same folder structure, may be path of json file is different in your folder structure

Luke Berg Over a year ago

I have copied your reference code into a brand new project generated by the angular CLI. Running the ng serve command returns no errors, and the firefox web console shows no issues either. The file structure is exactly the same. There is nothing displaying on the page. If I copy the contents of the JSON file and set json = {"caseFileID": "1234567"}, the data shows on the page.

Naga Sai A Over a year ago

if you hard code json and if it works , then the issue is with the data from the import, can you reproduce same issue in stackblitz, something similar to this - stackblitz.com/edit/angular-f1hxf9?file=src/app/…

Luke Berg · Accepted Answer · 2019-09-15 19:53:33Z

0

I have found that in order to get the JSON file properly imported I had to add the following to my tsconfig.json:


    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "resolveJsonModule": true,
        ...
    }

answered Sep 15, 2019 at 19:53

Luke Berg

331 silver badge5 bronze badges

Collectives™ on Stack Overflow

Angular: pass JSON data to child component

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related