Building JavaScript dropdowns based on nested json

Question

Iam trying to build a html from a json object . My json will be in the following structure .

[{"Property1":[{"IsDropDown":"true","Value":"Drp1Value1"},
    {"IsDropDown":"true","Value":"Drp1Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}, 
{"Property2":[{"IsDropDown":"true","Value":"Drp2Value1"},
    {"IsDropDown":"true","Value":"Drp2Value2"},
    {"IsDropDown":"false","Href":"Link1"}]}]**

From this json I need to build 2 dropdowns by checking the property IsDropDown and 1 anchor link (IsDropDown == false) . Please keep in mind that propery object (Property1) is not fixed in length and even the nested object in Property is also not fixed . So i need one or more templates from which i can solve this.

From the above json output should be like 2 dropdowns first dropdown consisting of values Drp1Value1, DrpValue2 and second dropDown consisting of values Drp2Value1 and DrpValue2 . and if IsDropDown is false then build a anchor tag with href from the json object (No repetation should be allowed in From the above json 2 dropdown of 2 values each and a anchor tag sho.lud be built)

There is no way i can change the json structure because it is from a third party api . Is it possible with any of template frame works? i tried jTemplate and mustache.js but i was not able to do it .

If you show us what you've already done, you have a better chance of getting help. — Frank van Puffelen
– Frank van Puffelen, Commented Jan 8, 2013 at 19:48

Rajagopal 웃 · Accepted Answer · 2013-01-09 07:56:46Z

1

Take a look at this working sample in JQFaq.com. It has two dropdown boxes and when the first dropdown value changed it's childrens are displayed in second dropdown based on json data.

CODE:

var jsonData = [{
  "Property1": [{
    "IsDropDown": "true",
    "Value": "Drp1Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp1Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property1"
}, {
  "Property2": [{
    "IsDropDown": "true",
    "Value": "Drp2Value1"
  }, {
    "IsDropDown": "true",
    "Value": "Drp2Value2"
  }, {
    "IsDropDown": "false",
    "Href": "Link1"
  }],
  "Value": "Property2"
}];

var collection1 = [];
$.each(jsonData, function (key, value) {
  collection1.push(value.Value);
});

var $newOption = $.tmpl("<option>${Value}</option>", jsonData);
var $select = $("#Select1").append($newOption).change(function () {
  selectionChanged(this);
});
selectionChanged($select[0]);

function selectionChanged(select) {
  var selectedIndex = $.inArray(select.value, collection1);
  var newOpt = $.tmpl("<option>${Value}</option>", jsonData[selectedIndex][select.value]);
  $("#Select2").empty().append(newOpt);
}

answered Jan 9, 2013 at 7:56

Rajagopal 웃

8,5617 gold badges33 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajagopal 웃 Over a year ago

Welcome. Accept as answer if it helps.

Frank van Puffelen · Accepted Answer · 2013-01-08 20:13:05Z

This block is probably what you're struggling with:

var i, j, p;
var out = '';
for (i=0; i < json.length; i++) {
  for (p in json[i]) {
    if (json[i].hasOwnProperty(p)) {
      out += 'select name='+p+'<br/>';
      for (j=0; j < json[i][p].length; j++) {
        if (json[i][p][j].IsDropDown == 'true') {
          out += ' option='+json[i][p][j].Value+'</br>';
        }
      }
      break; // from for loop, since we only want one select per top-level object
    }
  }
}

So I'm iterating the arrays with a regular for loop. But then I'm finding the name of the "Property" with a for in and hasOwnProperty.

Note that I didn't implement any of the other business logic, because I doubt you'll have problems there.

You can find a fiddle with this code and your data here: http://jsfiddle.net/5kKD9/

Collectives™ on Stack Overflow

Building JavaScript dropdowns based on nested json

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related