UPDATE::How to implement custom pipe in Angular for json data

Question

Hope someone might be able to help me on this. I have a json data like this which I get from the Url. The sample data is like this.

{
  "home":
   {
      "landingPage":  {
        "title": "give some amount",
        "desc1": "Give technical account details".
        "desc2": "what is the time"
      }
   }
}

I need to use angular custom pipe to get the data. For Example: in app.component.html I would code as

{{home.landingpage.title | content }}
{{home.landingpage.desc1 | content }}
when I compile I should see "give some amount" 
"Give technical account details" on my localhost.

update, I have been using the following pipe to get the data. But I am stuck at this point. I have a content pipe.ts

@Pipe({name: 'content'{)
export class contentPipe implements PipeTransform{
constructor(private readonly _dataService: DataService){}
transform(contentKey : string, args?: any): string {
const newContent = this._dataService.getContent();
return newContent;
}

My dataservice looks like this

@Injectable()
export class DataService{
expression: jsonata.Expression;
result: any;
constructor(
private readonly httpClient ; HttpClient,
)
{
this.actualContent()
}

getContent():any{
return this.result;
}


actualContent(): void {
this.httpClient.get<any>(href).subscribe((content => (
this.expression = jsonata("landingpage.title"),
this.result= this.expression.evaluate(content),

cosnole.log('result", this.result))); //this is printing the expected result. which is "give some amount" however when it is returned from getContent method it is always undefined. 
}

I am not sure what is the mistake here but I am unable to return the value back to transform method in pipe.ts. It is always undefined.

Please help.

Does this answer your question? [angular iterate over json](https://stackoverflow.com/questions/20987604/angular-iterate-over-json) — Brandon Taylor, Oct 21 '21 at 23:50
My apologies. The link I provided was for Angular.js. Here's an Angular example: https://stackoverflow.com/questions/31490713/iterate-over-object-in-angular — Brandon Taylor, Oct 22 '21 at 00:24
Hello Brandon, thanks for the response. I am a total beginner to coding in angular or coding in general. I will take a look at this try it and come back. One thing I know is I will randomly use this {{'home.landingpage.title' | content }} in different places on app.component.html. So I am not sure if a for look would help. — Laika, Oct 22 '21 at 00:35
One more question is, Is it possible to use Jsonata node module in angular to parse the json? — Laika, Oct 22 '21 at 00:48
If you assign the JSON data to a property of your component, there's no need to use a pipe to access the data. You can simply access it via dot path: `{{ yourData.field.something }}` or bind it to other components/tags `[attr.id]="yourData.field.something"` — Brandon Taylor, Oct 22 '21 at 00:59

score 0 · Answer 1 · answered Oct 22 '21 at 14:02

0

you can still use *ngFor if that's what you want:

<ng-container *ngFor="let item of home.landingpage | keyvalue">
  {{item.value}}
</ng-container>

docs

answered Oct 22 '21 at 14:02

D Pro

1,756
1
8
15

I will check on this come back. – Laika Oct 22 '21 at 17:01
Hi any help on this? I have updated the implementation part. – Laika Oct 25 '21 at 22:29
it is unclear why you need the pipe here `{{home.landingpage.title | content }} {{home.landingpage.desc1 | content }}`. just `{{home.landingpage.title}} {{home.landingpage.desc1}}` without any pipes will work – D Pro Oct 26 '21 at 10:29

UPDATE::How to implement custom pipe in Angular for json data

1 Answers1