0

Basically I will be calling a service that will return a json object with an unknown amount of parents, children, grandchildren, etc., all with unknown names. Basically I just know it will be a JSON object, and I need to recursively parse through it with angular.ForEach(). I have only used recursion on a very basic level back in college, so I'm a bit out of my depth. I need to be able to display these objects in a tree-like structure in html after parsing, as well. Does anyone know of any good directives or anything of the sort that can help? Many thanks.

user7322961
  • 31
  • 5
  • 2
    have you tried any way, better add json so that I can help you – Manikanta Reddy Dec 20 '16 at 21:27
  • Use [JSON.parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). The **JSON.parse()** method parses a JSON string, constructing the JavaScript value or object described by the string. – georgeawg Dec 20 '16 at 23:12

2 Answers2

1

If all you want to do is display it, you can use angular-json-tree.

If you would like to programmatically iterate it, there are a number of ways to do it, but some of the best are already documented here: https://stackoverflow.com/a/1112609/632676

Note that if you are receiving a JSON string, you will have to convert it into an object via JSON.parse(jsonString);

Community
  • 1
  • 1
GPicazo
  • 6,516
  • 3
  • 21
  • 24
0

I have used this library in a very small project, not extensively. But there's a lot more to it than what I've used.

https://github.com/awendland/angular-json-tree

Basically, import and instantiate the library and use this for your HTML:

<json-tree object="jsonObject"></json-tree>

Depending on your specific needs (which you didn't state), you can use other properties - check the documentation for that.

As of Styling, they include a css file you can use. You're also free to extend or create your own from scratch.

I hope it helps!

Helvio
  • 707
  • 1
  • 7
  • 15
  • A simpler solution, but less interactive, would be using native AngularJS stuff. My "debug" view is usually like this: 
    {{ jsonObject | json }}
     – Helvio Dec 21 '16 at 15:49