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
Related
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">
See I want to make an HTML file that will display the current USD-GBP,
I am using this site: currencylayer.com
Their api :
http://apilayer.net/api/live?access_key=YOU_KEY_HERE¤cies=BBP&source=USD&format=1
Gives Me this output:
{
"success":true,
"terms":"https:\/\/currencylayer.com\/terms",
"privacy":"https:\/\/currencylayer.com\/privacy",
"timestamp":1522395543,
"source":"USD",
"quotes":{
"USDGBP":0.71
}
}
I Need an HTML file that Just displays 0.71.
Thank You In Advance
You can use JSON.parse to get the value(s) that you're looking for:
var myQuote = '{"success":true,"terms":"https:\/\/currencylayer.com\/terms","privacy":"https:\/\/currencylayer.com\/privacy","timestamp":1522395543,"source":"USD","quotes":{"USDGBP":0.71}}';
var jsonData = JSON.parse(myQuote);
document.getElementById("quote").innerHTML = jsonData.quotes.USDGBP;
<div id="quote"></div>
Try this :
var jsonObj = {
"success":true,
"terms":"https:\/\/currencylayer.com\/terms",
"privacy":"https:\/\/currencylayer.com\/privacy",
"timestamp":1522395543,
"source":"USD",
"quotes":{
"USDGBP":0.71
}
};
document.getElementById('result').innerHTML = jsonObj.quotes.USDGBP;
<div id="result">
</div>
I have a div in which I have to fill some data in. I have to render the HTML based on conditions and I am adding data to that div using jQuery. Can someone please tell me how I can add the condition based insertion of HTML on the page?
function AddData()
{
var data = "<div><h1>My data</h1>"
if(jsVariable){
<p>The JSVariable is present on page </p>
}
+"</div>"
$('.myDiv').after("<br/>"+data);
}
function AddData()
{
var data = "<div><h1>My data</h1>"
if(jsVariable){
data = data + "<p>The JSVariable is present on page </p>"
}
data = data + "</div>"
$('.myDiv').append("<br/>"+data);
}
function AddData(){
if(typeOf(jsVariable)!=="undefined"){
var data = "<div><h1>My data</h1>";
data += " <p>The JSVariable is present on page </p>";
data += "</div>";
$('.myDiv').after("<br/>"+data);
}
}
this should do the trick, but some element with a class of myDiv will need to already exist for this to work
<div class="myDiv"></div>
What exactly are you trying to do?
If you simply want to add some extra html content depending on the variable, you are almost done. You just need to add the <p> part to the data (data += "<p>...</p>").
If you're trying to add all of the html based on the variable, put the if statement around the $(".myDiv").after (which should be $(".myDiv").append btw).
You'r code is not valid.
Could you explain what do you want to do with
if(jsVariable){
<p>The JSVariable is present on page </p>
}
+"</div>"
If you want to add a html code at ending of a div, you should use
$('.myDiv').append('<p>Text text text text</p>');
simple usage:
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p").click(function() {
var a = $("#div1").text();
if (a == "one") {
$("#div2").text(a);
}
});
});
</script>
</head>
<body>
<div id="div1">one</div>
<div id="div2"></div>
<p>click me</p>
</body>
</html>
function addData(to)
{
var h1 = $('<h1>').text('My Data');
var data = $('<div>').append(h1);
if (window.jsVariable) {
$('<p>').text('JS Variable is present on the page').appendTo(data);
}
to.append(data);
}
addData( $('.myDiv') );
if (condition) {
$('div#yourDivID').html('<p>The JSVariable is present on page </p>');
}
In addition to .html(which places the html inside your div), you can use other things like append, prepend etc. Check out jQuery's documentation on DOM Insertion.
Here is a JSFiddle http://jsfiddle.net/va4n8/
function addData() {
var newDiv = $('<div>');
newDiv.append($('<h1>').html('My data'));
if ('jsVariable' in window) {
newDiv.append($('<p>').html('The JSVariable is present on page'));
}
$('.mydiv').after($('<br>')).after(newDiv);
}
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();
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>