So my console log displays all the information properly so I know my codes working, but now I want to output the data to a certain div in my HTML to display the playlist's songs that are being played. How do I print the JSON data from sound[i].title to a div?
widget.bind(SC.Widget.Events.PAUSE, function(){
$("#{STORIES.story_id}6 :image").removeClass('buyy')
.removeClass('buyyy')
.addClass('buy');
widget.getSounds(function(sound) {
var a = sound.length;
for(var i=0; i<a; i++){
console.log(sound[i].title);
}
});
});
Lacking any information about where in the DOM tree you'd actually like to put the data...
$('#someElement').append($('<div>', {text: sound[i].title }));
In many modern browsers, using jQuery, you can do the following:
$('#myDiv').text(JSON.stringify(myJson));
Also, if you would like the JSON to be formatted you can use:
JSON.stringify(myJson, undefined, 2);
// JSON -------^ ^ ^
// no filter ----------^ ^
// indent two spaces -------------^
Something like this
<script type="text/javascript">
//stuff and more stuff//
for(var i=0; i<a; i++){
document.getElementById('myList').append= sound[i].title+', ';
}
</script>
<p>My playlist: <span id='myList'>Empty</span> </p>
Related
I am trying to work with HTML 5 QR Code scanner foran attendance system.
Well I got that far, that I can scan QR Codes and push them into an array.
I can see the values of the array in the console.
Now I want that this array is shown below the QR Code Reader in my browser view.
I then want a form to submit my javascript array values to a PHP Code to use it with mysql
(Don`t know how to do that right know... :) )
My first problem: my html page is not showing anything.. it is supposed to show the values of my Code array:
<script>
var codeslz = [];
function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example:
//console.log(`Code matched = ${decodedText}`, decodedResult);
if(codeslz.indexOf(decodedText) !== -1){
} else{
codeslz.push (decodedText);
}
console.log (codeslz);
return codeslz;
}
function onScanFailure(error) {
// handle scan failure, usually better to ignore and keep scanning.
// for example:
//console.warn(`Code scan error = ${error}`);
}
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 350, height: 350} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
for(var i = 0; i < codeslz.length; i++){
document.write(codeslz[i] + "<br>");
}
</script>
Later I want to automatically let the shwoing of my array be reloaded, so the user can always see the actual values of the complete array codeslz.
I think there must be sth wrong with my array codeslz.
When I fill the array like this, it works without any problems:
<html>
<head>
</head>
<body>
<script>
var codeslz = ["This", "is","a", "Test"];
for(var i = 0; i < codeslz.length; i++){
document.write(codeslz[i] + "<br>");
}
</script>
</body>
</html>
I hope someone can help me. Thanks!!!!
Kind regards
Dan
I am passing arraylist object to javascript function on the click on button.below is my code. But I am unable to iterate that list in javascript.
<input type="button" onclick="viewSelectedOU('${quickLink.orgList}')" class="btn" value="view"/>
<script type="text/javascript">
function viewSelectedOU(selectedOU){
for(var i=0; i<selectedOU.length; i++){
var orgList1 = selectedOU[i];
}
}
</script>
can anyone tell me how to iterate java.util.ArrayList into javascript.?
check your rendered page, it shoud be something like onclick="viewSelectedOU([1,2,3,4])"
here is example of 2 calls:
http://jsfiddle.net/ybigus/K6CUm/
Test simple array
Test object array
Hope this helps
you can try
for(var i=0;i<selectedOU.all.length; i++){
var value = selectedOU.all(i);
}
i am retrieving some information from Google's API and placing them in a single variable, and then inserting them to a div in the DOM like so:
$(function() {
// Load the info via Google's API
$.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641/activities/public?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {
// Variable to hold the HTML we'll generate
var html = '';
// how many posts we're displaying on the page
var numberOfPosts = 3;
// Loop over the results, generating the HTML for each <li> item
for (var i=0; i<numberOfPosts; i++) {
html += '<article>';
html += '<img src="'+data.items[i].actor.image.url+'">';
html += '<p>'+data.items[i].title+'</p>';
html += '<p>'+data.items[i].published+'</p>';
html += '</article>';
}
// Insert the generated HTML to the DOM
$('.google-posts-container').html(html);
});
});
My question is: is there a way to store every piece of information in each of its own variable, and then get the information individually by echoing the variable? So i dont have to hardcode all that HTML.
back in the days I would do:
<div id="google-posts-container">
<article>
<img src="{{image}}">
<p>{{title}}</p>
<p>{{published}}</p>
</article>
</div>
<script type="text/javascript">
// render a template (replace variables and return html)
function renderTemplate(tmpl, data){
for (k in data){
while(tmpl.indexOf('{{'+k+'}}') > -1){
tmpl = tmpl.replace('{{'+k+'}}', data[k]);
}
}
return tmpl;
}
$(function(){
// our template
var template = $('#google-posts-container').html();
$('#google-posts-container').html(''); // or clear()
$.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641"
+"/activities/public"
+"?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {
// Variable to hold the HTML we'll generate
var html = '';
// how many posts we're displaying on the page
var numberOfPosts = 3;
// Loop over the results, generating the HTML for each <li> item
for (var i=0; i<numberOfPosts; i++) {
html += renderTemplate(template, {
image : data.items[i].actor.image.url,
title : data.items[i].title,
publish : data.items[i].published
});
}
// Insert the generated HTML to the DOM
$('.google-posts-container').html(html);
});
});
</script>
nowadays I use angularjs
About comment by 'galchen' - don't use angular.js for serious &(or) big projects. Just look at source code.
(can't add sub comment, thats why i wrote to main branch)
I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?
sample hyperlinks to look for(i want to extract mango,cherry,...) :
mango
cherry
my code string has blocks of data like below:
<div class="details">
<div class="title">
mango
<span class="type">3</span>
</div>
</div>
full code:
$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){
//$('#output').html(data.contents);
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
document.myform2.outputtext2.value = code ;
var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
code = code.match(pattern);
for (i = 0; i < code.length; i++) {
document.write($2<br />'));
}
});
</script>
It looks like you're trying to parse HTML with regex. This post has some more info on that topic.
Since this question is tagged as jQuery, you could try something like the following...
Make a jQuery object out of the returned HTML:
$markup = $(data.contents);
Find the anchors:
$anchors = $markup.find('a');
Get the text (or whatever attribute you want from it):
arrText = [];
$anchors.each(function() {
arrText.push($(this).text());
});
Put result into textarea:
$textarea.val(arrText.join(','));
To achive this jquery is the simplest solution, you can try below code
$('a').each(function(){
var copiedTitle = $(this).html();
var previous = $('#test').html();
var newText = previous +"\n"+ copiedTitle;
$('#test').html(newText);
});
JS Fiddle
i want to print an array with js and just add to every element some data with html()
the code i use is :
<script type="text/javascript">
$(document).ready(function() {
var testArray = ["test1","test2","test3","test4"];
for(var i=0;i<testArray.length;i++){
document.write(" " +testArray[i]+"<br />").html("is the best");
}
});
</script>
but it doesnt works.
HTML:
<div id="myDIV"></div>
JS:
$(document).ready(function() {
var testArray = ["test1","test2","test3","test4"];
var vPool="";
jQuery.each(testArray, function(i, val) {
vPool += val + "<br /> is the best <br />";
});
//We add vPool HTML content to #myDIV
$('#myDIV').html(vPool);
});
Update:
Added demo link: http://jsfiddle.net/aGX4r/43/
Syntax problem mate!
Let me get that for you!
// first create your array
var testArray = ["test1", "test2", "test3", "test4"];
// faster ready function
$(function(){
for( var i=0; i<testArray.length; i++ ) {
current = testArray[i] + '<br />' + 'is the best'; // this is a string with html in it.
$(current).appendTo("body"); // add the html string to the body element.
}
});
First. document.write it's not a good practice.
Then, you code have a little error: Function (as in document.write) doesn't have html method. Thats a jQuery method.
So, in order to print the array in the body, you could do:
$('p').html(["test1","test2","test3","test4"].join('<br />')).appendTo(document.body);
It's a little difficult to tell what you want to do, but if you want to append to an element in your DOM, use jQuery.append();
for(var i=0;i<testArray.length;i++) {
jQuery('#mydiv').append(testArray[i]);
}