As you can read this JSON using jquery or javaScript

Question

As you can read this JSON using jQuery or JavaScript. I never use JSON.

{
    "ES": {
        "130": {
            "code": "A Coruсa",
            "name": "A Coruña"
        },
        "131": {
            "code": "Alava",
            "name": "Alava"
        },
        "132": {
            "code": "Albacete",
            "name": "Albacete"
        }

To a select:

<select id="provincias">
    <option value="130">A Coruña</option>
    <option value="131">Alava</option>
    <option value="132">Albacete</option>
</select>

Your question doesn't make sense, can you try to explain what the issue is. — Rory McCrossan
– Rory McCrossan, Commented Oct 21, 2015 at 9:01
The best idea is start to collect info about similar problems like, stackoverflow.com/questions/9071525/… — Raúl Martín
– Raúl Martín, Commented Oct 21, 2015 at 9:07

Pranav C Balan · Accepted Answer · 2015-10-21 09:18:15Z

1

You do something like this using jQuery.map()

var data = {
  "ES": {
    "130": {
      "code": "A Coruсa",
      "name": "A Coruña"
    },
    "131": {
      "code": "Alava",
      "name": "Alava"
    },
    "132": {
      "code": "Albacete",
      "name": "Albacete"
    }
  }
};

// generate dropddown 
$('<select/>', {
  // setting id attribute
  id: 'provincias',
  // setting html content, iterating over JSON to add options
  html: $.map(data.ES,function(v,i) {
    // creating otions
    return $('<option/>', {
      // setting value as index in json
      value: i,
      // setting text content 
      text: v.name
    })
  })
  //appending the generated dropdown to the body
}).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Oct 21, 2015 at 9:18

answered Oct 21, 2015 at 9:12

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

Comments

Jai · Accepted Answer · 2015-10-21 09:23:09Z

You can make use of recursion:

var data = {
  "ES": {
    "130": {
      "code": "A Coruсa",
      "name": "A Coruña"
    },
    "131": {
      "code": "Alava",
      "name": "Alava"
    },
    "132": {
      "code": "Albacete",
      "name": "Albacete"
    }
  }
};

function setOptions(data) { // get data in the args
  var option = ''; // create a var to hold the options to be created.
  for (key in data) { // use for in loop to get the key and values
    if (data[key].constructor === Object) { // check if data is an object
      option += '<option value="' + key + '">' + data[key].name + '</option>'; // create option
      setOptions(data[key]); // pass the object again in the same function to get the "name" value.
    }
  }
  document.getElementById('provincias').innerHTML = option; // finally push in the dom.
}
setOptions(data.ES); // pass the data here, we're targeting ES5

<select id="provincias">
</select>

Collectives™ on Stack Overflow

As you can read this JSON using jquery or javaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related