Json PIPE - does Aurelia have one or should we create?

1

Hi guys,

We came from Angular world, we’re used to debug in HTML (supper helpfull sometimes). Does Aurelia have something out-of-the box?
i.ex: https://angular.io/api/common/JsonPipe

If not, does anyone already created one? Could share the code, please?

Thank you!

1 Like
2

This can be achieved in Aurelia using a very simple value converter:

json-value-converter.ts

  export class JsonValueConverter {
    public toView(value: any): string {
      return JSON.stringify(value);
    }
  }

component.html

<div>
  <p>Without JSON value converter:</p>
  <pre>${object}</pre>
  <p>With JSON value converter:</p>
  <pre>${object | json}</pre>
</div>

component.ts

export class JsonValComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}

Wherever you start Aurelia you can load your value converter so it can be used globally:

import { JsonValueConverter } from './json-value-converter';

export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .globalResources(JsonValueConverter);

  aurelia.start().then(() => aurelia.setRoot());
}
7 Likes
3

Hi @davicoradini,

just in case you miss the async-pipe: There is a plugin for that from one of the regular members of this forum: https://github.com/zewa666/aurelia-async-binding

Regards

2 Likes
4

Slight improvement to prevent errors

export class JsonValueConverter {
toView(value: any): string {
        if (typeof value !== "undefined") {
            return JSON.stringify(value);
        } else {
            return "undefined object";
        }
    }
}
2 Likes