Extract elements from JSON according to ul li click - php

Question

In an ajax call, i need to obtain, as a response, the value of a parameter of a JSON object, but i don't understand how to do it.
If this is my PHP file in which i reproduce the JSON structure
echo " { ";
echo '"general" : {';
echo '"obj" : [
{"name" : "Primo", "description" : "Descrizione associata alla prima voce"},
{"name" : "Secondo", "description" : "Descrizione associata alla seconda voce"},
{"name" : "Terzo", "description" : "Descrizione associata alla terza voce"}
]}}';
And this is my HTML file
$(document).ready(function(e) {
$('#name li').click(function() {
var name = $(this).text();
url = "example.php?name=" + name;
$.getJSON(url,
function(json) {
//for (i = 0; i < json.general.obj.length; i++) {
//output = "<tr>";
output = "<td>" + json.general.obj[0].name + "</td>";
output += "<td>" + json.general.obj[0].description + "</td>";
//output += "</tr><br/>";
console.log(output);
$("#response").append(output);
//}
});
});
});
<ul id="name">
<li data-id="1">Primo</li>
<li data-id="2">Secondo</li>
<li data-id="3">Terzo</li>
</ul>
<div id="response">
<!--Data goes here-->
</div>
Which is the right way to go? Where do i need to place the $_REQUEST['name'] variable to receive back as a response the desired "Description" value?
I'm stuck there

Answer 1

You can use the data-id to retrieve the specific item of the array by its index, something like this:
$('#name li').click(function() {
var name = $(this).text();
var index = $(this).data('id') -1;
var url = "example.php?name=" + name;
$.getJSON(url, function(json) {
output = "<p>" + json.general.obj[index].name + "</p>";
output += "<p>" + json.general.obj[index].description + "</p>";
$("#response").append(output);
});
});
Example fiddle
Note that I changed td in the output to p as td elements are only valid within tables.
Also, if you only want the data of the last clicked element to be visible (instead of appending a new set each time) you can use:
$("#response").html(output);