[英]Display text from jquery using json api response
i am trying to display text from a api response which is in json format. 我正在尝试显示来自json格式的api响应的文本。 i just need fresh loop though all "name" , " email" & number value. 我只需要新鲜的循环,尽管所有的“名称”,“电子邮件”和数字值。 something like Name: John Email : test@gmail.com Number: 998755000 类似于姓名:John电子邮件:test@gmail.com号码:998755000
but using code bellow i am getting undefined error like this picture 但是使用下面的代码我得到了未定义的错误,如这张图片
Json response from api- API的Json回应
[{"id":"1","name":"John","email":"test@gmail.com","numbers":"998755000"},{"id":"6","name":"Larry","email":"test@gmail.com","numbers":"5554888700"}]
Jquery code to display text- jQuery代码以显示文本
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('api.php', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Email : ' + jd.email+ '</p>');
$('#stage').append('<p> Number: ' + jd.number+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load api.php file result:</p>
<div id = "stage" style = "background-color:#cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
Since your requests returns a array of json objects. 由于您的请求返回了json对象数组。 You need to iterate over the result with forEach. 您需要使用forEach迭代结果。
$("#driver").click(function(event){
$.getJSON('api.php', function(data) {
data.forEach(function(jd) {
$('#stage').append('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Email : ' + jd.email+ '</p>');
$('#stage').append('<p> Number: ' + jd.number+ '</p>');
});
});
});
$(document).ready(function() { $("#driver").click(function(event){ $.getJSON('api.php', function(data) { var newHTML = ''; if (data && data.push) { //exists and it is an array newHTML = data.map(function(jd){ return '<p> Name: '+ jd.name +'</p>'+ '<p>Email : '+ jd.email +'</p>'+ '<p> Number: '+ jd.numbers +'</p>'; }).join(''); } $('#stage').html(newHTML); }); }); });
Using map we can loop over the results and generate the markup we want. 使用map,我们可以遍历结果并生成所需的标记。 Doing so first allows us to perform a single html() on stage so only one page redraw happens, increasing performance over a redraw for every paragraph. 首先,这样做使我们可以在舞台上执行单个html(),因此仅发生一次页面重绘,从而提高了每个段落的重绘性能。
it's because the api returns an array. 这是因为api返回一个数组。
$('#driver').click(function(event) {
$.getJSON('api.php', function(jd) {
console.log(jd); // add this and check your browser's console
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Email : ' + jd.email + '</p>');
$('#stage').append('<p> Number: ' + jd.number + '</p>');
});
});
It seems you are receiving json array. 看来您正在接收json数组。 You need to loop over the array, Here is a basic example. 您需要遍历数组,这是一个基本示例。
jd.map(function(item, i){
$('#stage').html('<p> Name: ' + item.name + '</p>');
$('#stage').append('<p>Email : ' + item.email+ '</p>');
$('#stage').append('<p> Number: ' + item.number+ '</p>');
});
Here is more detailed description of map function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control 这是地图功能的更详细描述https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.