I have an object that is actually a dictionary (or a map if you know it by another name). Meaning - key:value, key:value.

The thing is that it is nested - so it is possible to have:
key:value, key:{key:value, key:value}, key:value

I want to display it on a webpage.

I thought about a tree structure, but it feels awkward to put on the label key:value as text.

Is there a better design pattern to display this?

  • The relationships are not clear (to me) – paparazzo Dec 27 '14 at 12:33
  • 3
    Could you provide a context to your question? – 80gm2 Dec 27 '14 at 15:14

Why would "key:value" be the text? wouldn't a tree be like this?


download bmml source – Wireframes created with Balsamiq Mockups

In this example, Key 2 and 3 are nested

| improve this answer | |
  • actually a table is not a bad idea. Thanks. Do you know by any chance a web component that supports this? (javascript, html) – Boaz Dec 27 '14 at 16:46
  • Not off the top of my head, no. I do know that native tree widgets on Windows support it. – J. Dimeo Jan 5 '15 at 15:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.