Best way to display a json object in a json object in Angular 2 release 6

Question

I am working on converting an old Angular 1.X website to Angular 2 release 6. I've been creating a component class with corresponding html but i'm stuck at the point of displaying a json object inside of another json object. The json object I'm trying to display is

Details Obj :

    {
        "details":
        {
            "id": "36d610ed0c62bafd",
            "Field Name": "FID,Shape,OID_,BankPositi",
            "Geometry Type": "Point",
        },
     }

And the old code that displayed this was: HTML :

    <div ng-show="vm.item.showDetails" ng-repeat="(key, val) in vm.item.details">
        <p><span>{{key}}:</span>{{val}}</p>
    </div>

Javascript :

        vm.showDetails = function (entry) {
            entry.showDetails = !entry.showDetails;
            entry.numberOfWords = entry.showDetails ? config.search.showAll : config.search.numberOfWordsShown;
        }

What I'm wondering is what is the best way to iterate through the json obj and display it.

Possible duplicate of [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Chris Gomez, May 23 '18 at 14:34

score 1 · Accepted Answer · answered May 23 '18 at 14:38

1

How about simply

<pre>
  {{ yourObject | json }}
</pre>

Running example here:
https://stackblitz.com/edit/angular-ux1xst?file=src%2Fapp%2Fapp.component.ts

answered May 23 '18 at 14:38

maxime1992

22,502
10
80
121

that's en-genius, cant believe I missed that. Thank you. – yams May 23 '18 at 14:44

Best way to display a json object in a json object in Angular 2 release 6

1 Answers1