En este artículo, seleccionaremos valores de un objeto JSON y los mostraremos en el navegador usando jQuery. Para seleccionar valores de un objeto JSON a una página web, usamos el método append() .
Este método append() en jQuery se usa para insertar algún contenido al final de los elementos seleccionados.
Sintaxis:
$(selector).append( content, function(index, html) )
Enfoque: primero almacenamos un objeto JSON que contiene un par (clave, valor) en una variable. Hemos creado un botón usando el elemento <button> y cuando hacemos clic en el botón, la función jQuery llama con selector y hace clic en eventos. Después de hacer clic en el botón, el método attr() agregó el atributo de nombre con el elemento <select>. El elemento <option> se agrega a cada elemento usando los métodos append() y each().
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> How to select values from a JSON object using jQuery? </title> <!-- Import jQuery cdn library --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script> $(document).ready(function () { var json = [ { "name": "GFG", "text": "GFG" }, { "name": "Geeks", "text": "Geeks" }, { "name": "GeeksforGeeks", "text": "GeeksforGeeks" } ]; $('button').click(function () { var select = $("<select></select>") .attr("name", "cities"); $.each(json, function (index, json) { select.append($("<option></option>") .attr("value", json.name).text(json.text)); }); $("#GFG").html(select); }); }); </script> </head> <body style="text-align: center;"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> How to select values from a JSON object using jQuery? </h3> <div id="GFG"></div> <button>Submit</button> </body> </html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón: