Question

I get the following data back from my WCF Data Service (I cut out the metadata)

{
  "d": [{
      "CodeId": 6,
      "Title": "A Child Sub Item",
      "Parent":
    },
    {
      "CodeId": 5,
      "Title": "Another Root Item",
      "Parent": -1
    },
    {
      "CodeId": 4,
      "Title": "Child Item",
      "Parent": 2
    },
    {
      "CodeId": 2,
      "Title": "Root Item",
      "Parent": -1
    }
  ]
}

I am trying to get this into a <ul> style tree with Parent = -1 as root and then the rest as sub items of their parent id’s.

Can anyone help me please, preferably in jQuery? I will use this in jstree if someone knows of a better way to do this.

Thanks

Answer 1

1. Loop through those objects and convert them to the type jstree likes, while storing them in another object with CodeId as the key and the object as the value. Remember to preserve the Parent attribute
2. Loop through the object you just created, and for each item:
   1. If it’s a root node, add it into a list
   2. If it’s not a root node, look up its parent from the object and add it to the parent’s child collection
3. Feed the list you created in 3.1. into jstree