¿Cómo filtrar el objeto JSON anidado para devolver cierto valor usando JavaScript?

Dada una colección que contiene la información detallada de los empleados que están trabajando en la organización. Necesitamos encontrar algunos valores de esas colecciones anidadas de detalles. Esa colección se conoce como objeto JSON y la información dentro del objeto se conoce como objeto JSON anidado.

Ejemplo 1: Creamos los objetos JSON anidados usando código JavaScript. Considere un ejemplo, suponga que hay detalles de 4 empleados y necesitamos encontrar el número de calle del primer empleado, entonces se puede hacer de la siguiente manera. 

employees[0].address.["street-no"] 

Si necesitamos encontrar los detalles residenciales del segundo empleado, use las siguientes instrucciones.

employees[1].address.["street-no"]

Nota: El punto es un operador que indica que seleccione el número de calle del campo de dirección del primer empleado. Ese “número de la calle” está dentro de la “dirección”, por lo que se usa el operador punto. 

Para imprimir el resultado anterior en el documento, necesitamos usar document.write

html

<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color:green;">
        GeeksForGeeks
    </h2>
  
    <script>
        var employees = [
        {
            "emp_id":101,
            "empname":"Ram",
            "salary":60000,
            "address" : 
            {
                "street-no":20,
                "plot-no":121,
                "city":"pune",
                "contact" : 
                {
                    "landline" : 2292099,
                    "mobile" : 8907632178
                }
            }
        },
        {
            "emp_id":102,
            "empname":"Shyam",
            "salary":50000,
            "address" : 
            {
                "street-no":12,
                "plot-no":221,
                "city":"pune"
            }
        },
        {
            "emp_id":103,
            "empname":"Lakhan",
            "salary":40000,
            "address" : 
            {
                "street-no":11,
                "plot-no":432,
                "city":"pune"
            }
        },
        {
            "emp_id":104,
            "empname":"Snigdha",
            "salary":60000,
            "address" : 
            {
                "street-no":21,
                "plot-no":222,
                "city":"pune"
            }
        }]
  
        document.write("<b>" + "Employee Id : "
            + "</b>" + employees[0].emp_id + "<br>");
  
        document.write("<b>" + "Employee Name : " 
            + "</b>" + employees[0].empname + "<br>");
  
        document.write("<b>" + "Employee Salary : "
            + "</b>" + employees[0].salary + "<br>");
  
        document.write("<b>" + "Address -> " 
            + "Street Number : " + "</b>" +
            employees[0].address["street-no"]);
    </script>
</body>
  
</html>

Producción:

Ejemplo 2: Necesitamos crear los objetos JSON anidados usando JavaScript. Considere un ejemplo que contiene la información de 4 empleados y necesitamos encontrar el número de teléfono móvil del primer empleado, entonces se puede hacer de la siguiente manera.

employees[0].address.contact["mobile"]

Para encontrar los datos de contacto del segundo empleado.

employees[1].address.contact["mobile"]

El operador punto se utiliza para seleccionar el móvil del campo de contacto del campo de dirección del segundo empleado.

html

<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color: green;">
        GeeksForGeeks
    </h2>
    <script>
        var employees = [
        {
            "emp_id":101,
            "empname":"Ram",
            "salary":60000,
            "address" : 
            {
                "street-no":20,
                "plot-no":121,
                "city":"pune",
                "contact" : 
                {
                    "landline" : 2292099,
                    "mobile" : 8907632178
                }
            }
        },
        {
            "emp_id":102,
            "empname":"Shyam",
            "salary":50000,
            "address" : 
            {
                "street-no":12,
                "plot-no":221,
                "city":"pune"
            }
        },
        {
            "emp_id":103,
            "empname":"Lakhan",
            "salary":40000,
            "address" : 
            {
                "street-no":11,
                "plot-no":432,
                "city":"pune"
            }
        },
        {
            "emp_id":104,
            "empname":"Snigdha",
            "salary":60000,
            "address" : 
            {
                "street-no":21,
                "plot-no":222,
                "city":"pune"
            }
        }]
  
        document.write("<b>" + "Employee Id : "
            + "</b>" + employees[0].emp_id + "<br>");
  
        document.write("<b>" + "Employee Name : " 
            + "</b>" + employees[0].empname + "<br>");
  
        document.write("<b>" + "Employee Salary : " 
            + "</b>" + employees[0].salary + "<br>");
  
        document.write("<b>" + "Address -> " 
            + "Street Number : " + "</b>"
            + employees[0].address["street-no"] + "<br>");
  
        document.write("<b>" + "Address -> " 
            + "Phone Number -> " + "</b>"
            + "<b>" + "Mobile : " + "</b>"
            + employees[0].address.contact["mobile"]
            + "<br>");
    </script>
</body>
  
</html>

Producción:

Ejemplo 3: hemos creado un objeto JSON que consta de datos personales como su nombre, apellido, sexo, etc. utilizando JavaScript. Supongamos que nuestro objeto JSON contiene detalles de 2 personas y necesitamos encontrar el nombre y apellido de la segunda persona, luego debemos hacer lo siguiente.

por primer nombre

Person[1].Name["FirstName"]

Por apellido

Person[1].Name["LastName"] 

html

<!DOCTYPE html>
<html>
  
<body>
    <h2 style="color: green;">
        GeeksForGeeks
    </h2>
  
    <script>
        var Person = [
        {
            "Name" : {
                "FirstName" : "Smita",
                "LastName" : "Verma"
            },
            "Degree" : {
                "BE" : "CSE",
                "MTECH" : "CSE"
            },
            "Gender" : "Female"    
        },
        {
            "Name" : {
                "FirstName" : "Ramesh",
                "LastName" : "Rajput"
            },
            "Degree" : {
                "BE" : "CIVIL",
                "MTECH" : "CIVIL"
            },
            "Gender" : "Male"    
        }]
  
        document.write("<b>" + "FirstName : " + "</b>" 
            + " " + Person[1].Name["FirstName"] + "<br>");
  
        document.write("<b>" + "LastName :" + "</b>" + " "
            + Person[1].Name["LastName"] + "<br>");
  
        document.write("<b>" + "Degree : " + "->" + "BE : "
            + "</b>" + " " + Person[1].Degree["BE"] + "<br>");
  
        document.write("<b>" + "Gender :" + "</b>" + " " 
            + Person[1].Gender + "<br>");
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por snigdha_yambadwar 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 *