jQuery .html only get last value of JSON - javascript

I have a problem with jQuery("#someID").html. It only prints the last key from the JSON.
Here is the js:
<div class="row" id="fetchmember">
<script type="text/javascript">
jQuery('#group').change(function() {
var id_group = this.value;
var memberjson = "fetchmember.php?group="+id_group;
jQuery.getJSON(memberjson, function(data) {
jQuery.each(data, function(i, items) {
jQuery("#fetchmember").html("<li>"+items.name+"</li>");
});
});
});
</script>
</div>
JSON result from one of the selected option :
[{"id":"1645819602","name":"Michael English","first_name":"Michael","last_name":"English"},
{"id":"100000251643877","name":"Bill Gaither","first_name":"Bill","last_name":"Gaither"}]
I want to print all of name from the json, but it print only last name key of the json. What's wrong with my code?
Any advice and helps would be greatly appreciated. Thank you very much

You're erasing the content on each iteration. Use append instead of html

Instead of
jQuery("#fetchmember").html("<li>"+items.name+"</li>");
Use
jQuery("#fetchmember").append("<li>"+items.name+"</li>");
At iteration, you overwrite the content with last one.

Better to use .append instead of .html, but you have to make the area empty before : jQuery("#fetchmember").empty();

Related

JSON data key starts with number and cannot be displayed via jquery

I'm missing something here in my small js script for displaying some REST API data via jquery.
Here's what I'm doing (the issue is with the ${data.acf.7yr_full_copy}, the 7 is causing the problem. Do I need to escape it? I've searched all over and can't find an answer.
$.getJSON('https://www.algaecal.com/wp-json/acf/v3/options/options', function (data) {
var fullCopy = `${data.acf.7yr_full_copy}`;
console.log(fullCopy);
$(".seven-year-content").html(fullCopy);
});
var fullCopy = `${data.acf['7yr_full_copy']}`;
The template string is unneeded.
$.getJSON('https://www.algaecal.com/wp-json/acf/v3/options/options', function (data) {
var fullCopy = data.acf['7yr_full_copy'];
$(".seven-year-content").html(fullCopy);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seven-year-content">

Count html elements in ajax returned data

I've got a jquery $.ajax call that returns a set of html from data.html which is like;
<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>
<div class="blah"><li>test</li></div>
I'd like to count the amount of elements that have a class of .blah and i'm not sure how to do this.
I've tried:
data.html.getElementsByClassName('blah').length
but that obviously doesn't work!
Any suggestions gratefully received!!
Try utilizing .hasClass()
var data = {};
data.html = '<div class="blah item item-wrapper print"></div>'
+ '<div class="blah item item-wrapper digital"></div>';
var len = $.grep($.parseHTML(data.html), function(el, i) {
return $(el).hasClass("blah")
}).length;
$("body").html(len);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
You should be able to do this using either .filter() or .find(), depending on the exact format of your returned HTML. If the format is is exactly as you have stated, then the following should work:
$.get("data.html", function(data) {
var length = $(data).filter(".blah").length;
});
If there is some sort of wrapper element around your items with class blah, then you would use .find():
$.get("data.html", function(data) {
var length = $(data).find(".blah").length;
});
$('.blah','context').length
Replace context by object in which you want to search

Json show data from website display only undefined

Hallo i have problem with JSON to show data on mobile jQuery
With console log show everything okay:
$.getJSON("http://www.mcaps.at/redesign/api/get_page/?json=get_page&dev=1&id=119%22",
function page(data) {
console.log(data.page.content);
});
and when I try to display data in div then show me only 19 times undefined
this is my code to display data:
$.getJSON("http://www.mcaps.at/redesign/api/get_page/?json=get_page&dev=1&id=119%22",
function page(data) {
var output ='<div>';
$.each(data.page, function(key,val){
output+='<p>'+val.content+'</p>';
});
output +='</div>';
$('#home').html(output);
});
I need help please!
Thanks!
You don't need to loop through all the properties:
You can simply use
output+='<p>'+data.page.content+'</p>';
instead of looping through each property:
$.each(data.page, function(key,val){
output+='<p>'+val.content+'</p>';
});
DEMO
$.getJSON("http://www.mcaps.at/redesign/api/get_page/?json=get_page&dev=1&id=119%22",
function page(data) {
var output ='<div>';
output+='<p>'+data.page.content+'</p>';
output +='</div>';
$('#home').html(output);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home"></div>
Why are you using .each?
Here is the working demo

Get Item Count for a Specific View

Is there a piece of jQuery or JavaScript that I can run that will allow me to create a Content Editor Web Part that has "This is the number of list items: XYZed."
I've tried this but it is not working:
http://www.martinhatch.com/2010/09/how-to-achieve-count-on-large.html
The one I tried was the 4'th attempt. If someone could help me that would be fantastic.
try these solutions/posts in the given order.
https://sharepoint.stackexchange.com/questions/5477/getting-a-count-of-list-items-in-a-list-via-ecmascript
https://sharepoint.stackexchange.com/questions/18050/how-do-i-get-the-number-of-items-in-a-list
http://www.codeproject.com/Questions/266281/jQUERY-TO-GET-COUNT-OF-TOTAL-ITEMS-EXISTED-IN-SP-L
It worked for me. All I had to do was create the grouped view and put the url into the code. Tho I used quotes
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//////////
// you will need to change this URL
var url = "http://sppos/Lists/Statistics/Grouped.aspx";
//////////
var groupings = [];
$.get(url, function(data) {
$(data).find("tbody[id^=titl][groupString] > tr > td").each(
function(index, value){
groupings.push($(this).text());
}
);
$("#placeholder").append("<ul></ul>");
$.each(groupings, function(index, value){
$("#placeholder ul").append("<li>" + value + "</li>")
});
});
});
</script>
<div id="placeholder"></div>
After testing, no quotes doesn't work, which may be the cause of some grief

Getting the selected listValue of <s:select> in javascript

I am using tag of struts to display a list of items.
<s:select name="example" id="example" list="exampleList" listKey="exampleKey"
listValue="exampleValue" onchange="fun()"/>
Now I have a javascript function:
function fun()
{
var ex=document.getElementById("example");
alert(ex.value);
}
In this function I need to get the listValue of the selected item but when I'm using the above code, it just alerts me the listKey that I have selected. How can I get the listValue instead of listKey in the javascript function?
$(document).ready(function() {
$('#reminderTypeID').change(function()
{
var ex = document.getElementById("reminderTypeID");
var selTex = ex[$('#reminderTypeID').val()].text;
var selVal = ex[$('#reminderTypeID').val()].value;
alert(ex[$('#reminderTypeID').val()].text);
});
});
Try this (Worked for me):
function fun()
{
var ex = document.getElementById("example");
alert(ex.getAttribute('listValue'));
}
Edit
Added fiddle: http://jsfiddle.net/FranWahl/Ur6jT/2/
(Not sure why it won't work for you. In the fiddle it works.)
I ran into this same issue, and neither of the other answers was working for me. This is the solution that I found worked:
$(document).ready(function(){
$("#example").change(function(){
var options = document.getElementById("example").options;
var selectedIndex = document.getElementById("example").selectedIndex;
var selectedOptionText = options[selectedIndex].text;
var selectedOptionValue = options[selectedIndex].value;
console.log("Id of selected option is: " + selectedOptionValue);
console.log("Text of selected option is: " + selectedOptionText);
});
});
To further understand the issue, it helped to think about what HTML is created when the JSP is processed. The <s:select> will generate the following HTML:
<select id="example" name="example">
<option value="456">TextA</option>
...
</select>
Following OP's sample code, "456" would be derived from exampleKey and "TextA" from exampleValue. There would be such HTML <option> for each item in exampleList.
Note in my solution, I used the jQuery .change() function. However I also tried the solution with onchange="fun()", as the OP had done, and that worked too.
When I tried replacing document.getElementById("example") with $("#example"), the solution did not work.
Also helpful was reading this reference on <select> option selectedValue.

Categories