En jQuery, para analizar cualquier dato en cualquier bloque se transfiere mediante el uso de métodos de inserción DOM. Algunos de los métodos de inserción de DOM son append() , appendTo() , html() , prepend () , prependTo() , text() . Para analizar JSON en cualquier bloque también se maneja de la misma manera, pero junto con las funciones de devolución de llamada de Ajax y los métodos parse.JSON() . Aquí , los métodos parse.JSON() están en desuso en jQuery 3.0 , por lo que el método JSON.parse() se usa en su lugar en versiones posteriores.
Sintaxis:
/* JSON data might be in array also */
var $json-data= '{json-index:json-values}'
/* Creating object for parsed JSON data */
var $json-object= JSON.parse($jsondata);
/* Parse text along with JSON data-value
with respect to index */
$("selected block").text($json-object.index);
o
/* Parse HTML tag along with JSON data-value
with respect to index */
$("selected block").html( "opentag" + $json-object.index + "closetag");
Enfoque 1:
- Apliquemos la función de devolución de llamada AJAX usando el método $.ajax().
- El método $.ajax() se lleva a cabo de manera diferente, pero aquí solo pasamos el objeto/objeto de configuración literal como sus únicos argumentos al método $.ajax() junto con los datos de JSON Array.
Ejemplo 1: en el siguiente ejemplo, la función de devolución de llamada de AJAX se utiliza para analizar la array JSON en un bloque HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeeks</h1>
<h3>Top 3 Students List</h3>
<br>
<table style="border:10px;border-style: double;"
border="2" cellpadding="20"
cellspacing="20">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NO</th>
<th>TOTAL MARK</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"
data-stud="student1"
data-topstud="Name">
</td>
<td align="center"
data-stud="student1"
data-topstud="Roll">
</td>
<td align="center"
data-stud="student1"
data-topstud="TotalMark">
</td>
</tr>
<tr>
<td align="center"
data-stud="student2"
data-topstud="Name">
</td>
<td align="center"
data-stud="student2"
data-topstud="Roll">
</td>
<td align="center"
data-stud="student2"
data-topstud="TotalMark">
</td>
</tr>
<tr>
<td align="center"
data-stud="student3"
data-topstud="Name">
</td>
<td align="center"
data-stud="student3"
data-topstud="Roll">
</td>
<td align="center"
data-stud="student3"
data-topstud="TotalMark">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>:</th>
<th> Top 3 Students List</th>
<th>:</th>
</tr>
</tfoot>
</table>
</center>
<script>
var data = {
"student1": [{
"Name": "Arun",
"Roll": 10056,
"TotalMark": 98,
}],
"student2": [{
"Name": "Vinoth",
"Roll": 10057,
"TotalMark": 96,
}],
"student3": [{
"Name": "Zafar",
"Roll": 10068,
"TotalMark": 85,
}]
}
//AJAX callback:
$('td').html(function() {
var $block = $(this)
return data[$block.data('stud')]
[0][$block.data('topstud')];
});
$("th").css("background-color", "#08f");
$("tr:nth-child(1)").css("background-color", "green");
$("tr:nth-child(2)").css("background-color", "yellow");
$("tr:nth-child(3)").css("background-color", "red");
</script>
</body>
</html>
Producción:
Enfoque 2:
- Análisis de strings JSON mediante el método JSON.parse nativo.
- El método JSON.parse se usa en lugar del método en desuso de jQuery 3.0 $.parseJSON().
Ejemplo 2: en el siguiente ejemplo, el método jQuery.parseJSON() y el método JSON.parse() se utilizan para analizar datos JSON en un bloque HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<style>
div {
border: 2px solid green;
padding: 20px;
}
h2 {
color: red;
}
b {
color: #08f;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeeks
</h1>
<br>
<div>
<h2>Employee Details</h2>
<p></p>
<h2>Website Details</h2>
<em></em>
</div>
</center>
<script>
// Using jQuery.parseJSON()
var company = jQuery.parseJSON(
'{"employee_name":"Adam","age":25,"salary":"11,500"}');
$('p').html("<b>Employee Name:</b> " + company.employee_name
+ ",<br><b>Age:</b> " + company.age +
",<br> <b>Sal/Month:</b> " + company.salary);
</script>
<script>
$(document).text(function() {
var $mytxt = '{ "website":"GeeksforGeeeks",
"url":"https://www.geeksforgeeks.org/" }'
// Using JSON.parse()
var $web = JSON.parse($mytxt);
var $block = $('em');
return $block.text("WebsiteName: " +
$web.website +
", URL: " + $web.url);
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jquery.com/
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA