¿Cómo seleccionar valores de un objeto JSON usando jQuery?

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:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *