[英]How to return a json object from a function in jquery with no ajax call?
因此,我试图让一个Web应用程序,其中我需要显示车的确认对话框()的细节,但我不能够存储变量,因为它是异步函数调用。 所以,我尝试使用函数回调,但通没有中断。 请帮助如何从功能getValueUsingClass()将数据获取到cart_items中。
创建一个延迟的对象,但我不如何使用它。 急需的帮助。 我很沮丧,这件事。 所以请帮忙,谢谢
//this is client.js
$(document).ready(function () {
var dfd = $.Deferred();
var cart_items = [
//this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
];
//collecting the items into a json object to send to the server
$(".checkboxlist").click(function () {
cart_items = (getValueUsingClass());
console.log(cart_items);
})
//function to store the values in cart_items but not able to store
function getValueUsingClass(setValue) {
/* declare a checkbox array */
var chkArray = [];
/* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
$(".checkboxlist:checked").each(function () {
var element = this;
var cart_item = {
id: this.id,
item: this.name,
cost: Number(this.value),
quantity: 1
}
chkArray.push(cart_item);
setValue(cart_items);//tried to use this as a callback function
})
/* we join the array separated by the comma */
function setValue(cart_items) {
cart_items = chkArray;
console.log("hell" + cart_items[0].id);
}
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
plate is the cart for this, I am using local variable chkArray to store the print the data on the cart
$(".plate").on('click', function () {
$('.plate_items').html(" ");
console.log(cart_items[0].id);
for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
$('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
}
});
return chkArray;
}
$('.proceed_btn').on('click', function () {
console.log("hello");
console.log(cart_items);
let details = [{
name: $('#name').val(),
email: $('#email').val(),
empid: $('#empid').val()
}]
console.log(details[0].name + details[0].email + details[0].empid);
cart_items = cart_items.concat(details);
})
})
//this is index.html
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<div class="container-fluid header">
<span class="main_title" style="float:left">Eatachi</span>
<nav class="nav navigation">
</nav>
</div>
</header>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg plate" data-toggle="modal" data-target="#myModal">Plate</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<form>
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email ID:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="empid">Employee ID:</label>
<input type="text" class="form-control" id="empid">
</div>
<h4 class="modal-title">Cart Details</h4>
</div>
<div class="modal-body plate_items">
<p>Some text in the modal.</p>
<ul class="list-group">
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success proceed_btn">Proceed to payment</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1">
</div>
<div class="col-lg-10">
<div class="col-lg-4">
<header>
<h3>Veg Alacarte</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/1.jpg" />
</a>
</h4>
</div>
<div id="collapseListGroup1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="14" type="checkbox" value="50"> Veg Fried Rice Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="15" type="checkbox" value="60"> Veg Biryani Rs.60</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="16" type="checkbox" value="70"> Paneer Fried Rice Rs.70</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="17" type="checkbox" value="50"> Veg Noodles Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="18" type="checkbox" value="35"> Curd Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="19" type="checkbox" value="35"> Sambar Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="20" type="checkbox" value="35"> Veg Pulao Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="21" type="checkbox" value="35"> Lemon Rice Rs.35</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="22" type="checkbox" value="15"> Veg Curry Rs.15</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="23" type="checkbox" value="10"> Curd Rs.10</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="24" type="checkbox" value="10"> Dal Rs.10</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
<div class=" col-lg-4">
<header>
<h3>Diet</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#dietList" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/2.jpg" />
</a>
</h4>
</div>
<div id="dietList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="25" type="checkbox" value="50"> North Diet Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="26" type="checkbox" value="50"> South Diet Rs.50</li>
<li class="list-group-item">
<input type="checkbox" class="checkboxlist" id="27" type="checkbox" value="70"> South Diet Royal Rs.70</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
<div class=" col-lg-4">
<header>
<h3>Non Veg Alacarte</h3>
</header>
<article class="well well-lg">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" href="#nonVegList" aria-expanded="false" aria-controls="collapseListGroup1">
<img class="img-thumbnail news-pic center-block" src="imgs/3.jpg" />
</a>
</h4>
</div>
<div id="nonVegList" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
<ul class="list-group">
<li class="list-group-item">
<input class="checkboxlist" id="1" type="checkbox" value="130"> Chicken Biryani Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="2" type="checkbox" value="130"> Fish Biryani- Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="3" type="checkbox" value="130"> Prawn65 Biryani Rs.130</li>
<li class="list-group-item">
<input class="checkboxlist" id="4" type="checkbox" value="100"> Chicken Dum Biryani Rs.100</li>
<li class="list-group-item">
<input class="checkboxlist" id="5" type="checkbox" value="110"> Chicken Roast Biryani Rs.110</li>
<li class="list-group-item">
<input class="checkboxlist" id="6" type="checkbox" value="120"> Chicken Boneless Biryani Rs.120</li>
<li class="list-group-item">
<input class="checkboxlist" id="7" type="checkbox" value="70"> Egg Biryani Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="8" type="checkbox" value="60"> Egg Curry with Roti Rs.60</li>
<li class="list-group-item">
<input class="checkboxlist" id="9" type="checkbox" value="80"> Egg Curry with Paratha Rs.80</li>
<li class="list-group-item">
<input class="checkboxlist" id="10" type="checkbox" value="70"> Chicken Fried Rice Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="11" type="checkbox" value="70"> Chicken Noodles Rs.70</li>
<li class="list-group-item">
<input class="checkboxlist" id="12" type="checkbox" value="60"> Egg Fried Rice Rs.60</li>
<li class="list-group-item">
<input class="checkboxlist" id="13" type="checkbox" value="60"> Egg Noodles Rs.60</li>
</ul>
</div>
<ul class="list-group">
</ul>
</article>
</div>
</div>
<div class="col-lg-1">
</div>
</div>
</div>
<div class="footer">
<div class="copyright">
<span id="copyright-year">©2018</span>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts/client.js"></script>
</html>
<!-- end snippet -->
用javascript进行的异步调用不会立即为您返回答案,但会向您返回承诺,最终它会为您提供期望的答案。 通常,promise具有then
方法,该方法是一个回调函数,当promise准备就绪时,promise会公开该方法以访问数据。 因此,关键是您可以在then
方法中利用数据。 有关更详细的参考,请转到此处 。
实际上,问题不在于任何函数回调或异步,我设置为cart_items的值应该使用push()方法传递,而不是直接分配。
$(document).ready(function () {
var dfd = $.Deferred();
var cart_items = [
//this is the variable that needs to be stored with the cart items which will be coming from getValueUsingClass() function.
];
//collecting the items into a json object to send to the server
$(".checkboxlist").click(function () {
cart_items = (getValueUsingClass());
console.log(cart_items);
})
//function to store the values in cart_items but not able to store
function getValueUsingClass(setValue) {
/* declare a checkbox array */
var chkArray = [];
/* look for all checkboxes that have a class 'check' attached to it and check if it was checked */
$(".checkboxlist:checked").each(function () {
var element = this;
var cart_item = {
id: this.id,
item: this.name,
cost: Number(this.value),
quantity: 1
}
chkArray.push(cart_item);
setValue(cart_items);//tried to use this as a callback function
})
/* we join the array separated by the comma */
function setValue(cart_items) {
//cart_items = chkArray; this is the mistake
cart_items.push(chkArray);//this is the correct way because I am passing the reference but the following array will not accept the reference as a value.
console.log("hell" + cart_items[0].id);
}
/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
plate is the cart for this, I am using local variable chkArray to store the print the data on the cart
$(".plate").on('click', function () {
$('.plate_items').html(" ");
console.log(cart_items[0].id);
for (itemIterator = 0; itemIterator < chkArray.length; itemIterator++) {
$('.plate_items').append('<li class="list-group-item">' + chkArray[itemIterator].cost + '</li>');
}
});
return chkArray;
}
$('.proceed_btn').on('click', function () {
console.log("hello");
console.log(cart_items);
let details = [{
name: $('#name').val(),
email: $('#email').val(),
empid: $('#empid').val()
}]
console.log(details[0].name + details[0].email + details[0].empid);
cart_items = cart_items.concat(details);
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.