Calculate the json's value then show in html - json

I have a json array:
[{"value": "1"},{"value": "2"},{"value": "3"},{"value": "4"},{"value": "5"},{"value": "6"}]
My code is :
$.ajax({
url: "120.58.243.11:8080/needCal/myJson.json",
dataType: 'json',
success: function(data) {
var items = [];
$.each(data, function(key, value) {
items.push("<tr>");
items.push("<td id=''" + key + "''>" + value.value+ < /td>");
items.push("<td id=''" + key + "''>" + total of values + < /td>");
items.push("</tr>");
});
}
});
I want to calculate the values, how to do with that?

$.ajax({
url: "120.58.243.11:8080/needCal/myJson.json",
dataType:'json',
success: function(data){
var items = [];
var totalOfValue = 0;
$.each(data,function(key,value){
totalOfValue = totalOfValue + parseInt(value.value);
});
$.each(data,function(key,value){
items.push("<tr>");
items.push("<td id='" +key+ "'>" + value.value+</td>");
items.push("<td id='" +key+ "'>" + totalOfValue +</td>");
items.push("</tr>");
});
}
}
);

A simple way is to use the reduce method:
Something like this:
var total = arr.reduce(function(t, v) {
return t += Number(v.value);
}, 0);

Related

Parsing JSON Bing Search API using JQuery

I am trying to parse Bing Search API Version 7 JSON using the following code, but not sure what I am doing wrong. Would like to parse "name" and "url", my code is below.
Bing JSON Results are at the following URL -> http://52.15.219.114/bing2.php?q=freebsd&s=10&p=0&m=en-us
var e = escape($('#book').val());
var pg = 10;
var limit = 0;
$.ajax({
url: uri,
method: "GET",
data: { q:e, s:pg, p:limit },
success: function(data) {
len = data.webPages.value.length
for (i=0; i<len; i++ ){
results += "<p><a href='" + data.webPages.value[i].url + "'>" + data.webPages.value[i].name + "</a>: " + data.webPages.value[i].snippet + "</p>";
}
$("#bookout").html(results);
},
error: function() {
// console.log(data);
}
});
Below is a fix for parsing the Bing Search JSON API.
var e = escape($('#book').val());
var pg = 10;
var limit = 0;
$.ajax({
url: uri,
method: "GET",
data: { q:e, s:pg, p:limit },
success: function(data) {
var obj = JSON.parse(data)
var ocean = obj.webPages.value; //client prop is an array
for(var i = 0; i < ocean.length; i++){
//alert(ocean[i].name);
//FORMAT RESULTS
var ocean_format = '<div><div>' + '' + ocean[i].name + '</div><div>' + ocean[i].snippet + '</div><div class="text-secondary">' + ocean[i].displayUrl + '</div></div>';
$("#bookout").append(ocean_format);
}//END SEARCH RESULTS
},
error: function() {
// console.log(data);
}
});

How to show Total No. of post In blogger with ajax get method

I want to show total no. of post in blogger with ajax get method bellow is my code.
<div id='show'></div>
<script type="text/javascript">
$.ajax({
url: "https://techtovillage.blogspot.com/feeds/posts/default?orderby=published&max-results=10&start-index=2&alt=json-in-script",
type: "get",
dataType: "jsonp",
success: function (data) {
var Posts = '<div class="hindipathtestapp">';
for (var i = 0; i < data.feed.entry.length; i++) {
var totalposts = json.feed.openSearch$totalResults.$t;
var posttitle = data.feed.entry[i].title.$t;
var postcontent = data.feed.entry[i].content.$t;
Posts += "<div class='testapp'><h1>" + totalposts + "</h1><h3>" + posttitle + "</h3><div class='content'>" + postcontent + "</div></div>";
}
Posts += "</div>"
document.getElementById('show').innerHTML = Posts;
}
});
</script>
Try this
<div id='show'></div>
<script type="text/javascript">
$.ajax({
url: "https://techtovillage.blogspot.com/feeds/posts/default?alt=json-in-script",
type: "get",
dataType: "jsonp",
success: function (data) {
var totalposts = data.feed.openSearch$totalResults.$t;
document.getElementById('show').innerHTML = "<div class='totalposts'>" + totalposts + "</div>";
}
});
</script>

Refresh dropdown with Jquery

I have one dropdown for displaying the month from January to current month in jQuery mobile. I'm getting the data using JSON. But the problem is selected option is not getting refresh.
$.ajax({
type: "POST",
url: "../modules/loadmonth.php?id=getoption&studid=" + $('#studentids').val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
var sel;
if (date[i].optval == date[i].curmon) {
sel = "selected";
} else {
sel = "";
}
result = '<option value=' + data[i].optval + '' + sel + '>' + data[i].opt + '</option>';
});
$('#getmon').append(result);
}
});
The value attribute should be in quotes, but more importantly you'll need a space between it and your selected attribute.
I have added selectmenu after append then it works.
$.ajax({
type: "POST",
url: "../modules/loadmonth.php?id=getoption&studid=" + $('#studentids').val(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
var sel;
if (date[i].optval == date[i].curmon) {
sel = "selected";
} else {
sel = "";
}
result = '<option value=' + data[i].optval + '' + sel + '>' + data[i].opt + '</option>';
});
$('#getmon').append(result).selectmenu('refresh',true);
}
});

How to maintain the dynamic generated textboxes after postback

I am generating dynamic html textboxes in my aspx page. I add a button for do some functionality. now whenever I click on my button it post back and all the dynamic generated textboxes go from my form for this I have to add it again. But I want to maintain these textboxes after postback. Here is the code how i am generating textboxes
<script type="text/javascript">
var textid = null;
var textid1 = null;
$(document).ready(function () {
setupAutoComplete(textid);
setupAutoComplete1(textid1);
var counter = 2;
$("#addButton").click(function () {
if (counter > 5) {
alert("Limit Exceeds");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
textid = "textbox" + counter;
textid1 = "textbox" + counter+1;
// newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
// '<input type="text" name="textbox' + counter +
// '" id="textbox' + counter + '" value="" class="auto">');
newTextBoxDiv.after().html('<div class="fields-left"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/> </div><div class="fields-right"> <label> Going to</label> <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
setupAutoComplete(textid);
setupAutoComplete1(textid1);
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
var setupAutoComplete= function SearchText2(textid) {
$('.auto').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Home.aspx/GetAutoCompleteData",
data: "{'code':'" + document.getElementById(textid).value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
var setupAutoComplete1 = function SearchText3(textid1) {
$('.auto').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Home.aspx/GetAutoCompleteData",
data: "{'code':'" + document.getElementById(textid1).value + "'}",
dataType: "json",
success: function (data) {
response(data.d);
},
error: function (result) {
alert("Error");
}
});
}
});
}
</script>
now in this code I am generating maximun 10 textboxes two in each row and after that I write some code for json autocomplete for each dynamic generated textbox. Now problem is this when i click on my button after that its postback and all the textboxes and its values goes away. I am unable to maintain these textboxes. Can anybody tell me how can we maintain the dymanic generated textboxes after postback?
Thanks

Javascript: each function value dynamic title

I am trying to use following code:
var list_id = "Cust";
var page_id = "SubPageCust";
var show = "Company";
$.ajax({
url: "sap.php",
dataType: "json",
type: "POST",
success: function(data) {
var output = '';
$('#' + list_id).empty();
var value1 = "value." + show;
$.each(data, function(index, value){
output += '<li><a href="#' + value.show
+'" data-transition="slide">' + value.show + '</a></li>';
});
$('#' + list_id).append(output).listview('refresh');
The JSON title is Company:Company. Has anyone an idea how to use the value.title dynamically?
Regards