• 0

Convert JSON to Bulleted List Using JS


Question

Can some one help me make the following JSON data:

{
	  "main": {
	    "label":"Main",
	    "url":"#main"
	  },
	  "project": {
	    "label":"Project",
	    "url":"#project"
	  },
	  "settings": {
	    "label":"Settings",
	    "url":"#settings",
	    "subnav":[
	      {
	        "label":"Privacy",
	        "url":"#privacy"
	      },
	      {
	        "label":"Security",
	        "url":"#security"
	      },
	      {
	        "label":"Advanced",
	        "url":"#advanced"
	      }
	    ]
	  }
	}

into the following bullets list using JS? Assuming you don't know what the first nodes are call labeled (e.g. "main", "project" <- these will be dynamically generated):

  • Main (#main)
  • Project (#project)
  • Settings (#settings)
    • Privacy (#privacy)
    • Security (#security)
    • Advanced (#advanced)

Thanks

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Cool, thanks.

Is it possible to put the JSON data in to a variable like the following and still use your code?

var ListData = {
  "main": {
    "label":"Main",
    "url":"#main"
  },
  "project": {
    "label":"Project",
    "url":"#project"
  },
  "settings": {
    "label":"Settings",
    "url":"#settings",
    "subnav":[
      {
        "label":"Privacy",
        "url":"#privacy"
      },
      {
        "label":"Security",
        "url":"#security"
      },
      {
        "label":"Advanced",
        "url":"#advanced"
      }
    ]
  }
};

Link to comment
Share on other sites

  • 0

That's cool! THanks so much iHaz. :-)

I have one more question for you. Using Javascript, how could new top-level entries be added dynamically insert after the "settings" entry in to ListData variable? In the following example, I'm adding ,"JOSN_IS_COOL": {"label": "Jason siad hello", "url": "#JSON"}

{
	"main": {
		"label": "Main",
		"url": "#main"
	},
	"project": {
		"label": "Project",
		"url": "#project"
	},
	"settings": {
		"label": "Settings",
		"url": "#settings",
		"subnav": [{
			"label": "Privacy",
			"url": "#privacy"
		},
		{
			"label": "Security",
			"url": "#security"
		},
		{
			"label": "Advanced",
			"url": "#advanced"
		}]
	},
 	"JOSN_IS_COOL": {
        "label": "Jason siad hello",
        "url": "#JSON"
    },
};

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.