I have this http://apis.is/concerts
which displays concerts that are upcoming in an API and I see that there are Images in it that I'm not able to display, I have made for loops that iterate through the objects and gets one by one and I see that every sixth one has an image link associated with it, How can I make that link for every sixth element in each object turn into an image?
I'm really sorry if this isn't written really well because i'm very bad at writing long stuff and explaining.
$.ajax({
url: 'http://apis.is/concerts',
type: 'GET',
dataType: 'json',
success: function(response) {
var results = response["results"]
for(var i in results) {
for(var x in results[i]) {
var the_text = results[i][x]
$("#objects").append("<p>"+ the_text +"</p>")
}
$("#objects").append("<br>")
}
}
});
If the_text contains the letters "jpg," append an image. Otherwise, append the text:
if(/jpg/.test(the_text)) {
$("#objects").append("<img src='"+ the_text +"'>");
} else {
$("#objects").append("<p>"+ the_text +"</p>");
}
Snippet:
$.ajax({
url: 'http://apis.is/concerts',
type: 'GET',
dataType: 'json',
success: function(response) {
var results = response["results"]
for(var i in results) {
for(var x in results[i]) {
var the_text = results[i][x]
if(/jpg/.test(the_text)) {
$("#objects").append("<img src='"+ the_text +"'>");
} else {
$("#objects").append("<p>"+ the_text +"</p>");
}
}
$("#objects").append("<br>")
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="objects"></div>
$.ajax({
url: 'http://apis.is/concerts',
type: 'GET',
dataType: 'json',
success: function(response) {
var results = response["results"]
for(var i in results) {
for(var x in results[i]) {
var the_text = results[i][x]
if(/jpg/.test(the_text)) {
$("#objects").append("<img src='"+ the_text +"'>");
} else {
$("#objects").append("<p>"+ the_text +"</p>");
}
}
$("#objects").append("<br>")
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="objects"></div>
Here is the shortest way to code it.
Since you know the key (imageSource) you want...
I recommand you use the JSON keys to format your page correctly depending on the value...
$.ajax({
url: 'http://apis.is/concerts',
type: 'GET',
dataType: 'json',
success: function(response) {
var results = response["results"]
for(i=0;i<results.length;i++) {
$("#objects").append("<h1>"+ results[i].userGroupName +"</h1>");
$("#objects").append("<img src='"+ results[i].imageSource +"'><br>");
$("#objects").append("<p>Date of show: "+ results[i].dateOfShow +"</p><hr>");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="objects"></div>
Related
Given an url like this:
https://images-na.ssl-images-amazon.com/images/M/MV5BMTM3MTc3OTc0NF5BMl5BanBnXkFtZTcwOTQ0OTM1MQ##._V1._CR34,0,295,440_UX32_CR0,0,32,44_AL_.jpg
How do i get it to be like
https://images-na.ssl-images-amazon.com/images/M/MV5BMTM3MTc3OTc0NF5BMl5BanBnXkFtZTcwOTQ0OTM1MQ##._V1._CR34,44_AL_.jpg
The issue I am having is with retrieving IMDB poster images, using this:
$('form[name="search-imdb"]').on("submit", function(e) {
var form = $(this);
e.preventDefault();
$.ajax({
url: "http://imdb.wemakesites.net/api/search",
data: form.serialize(), // assuming the form has a hidden input with api_key name, containing your API key
crossDomain: true,
dataType: "jsonp",
success: function(data) {
window.console.log(data);
}
});
});
I get a json response like:
"thumbnail": "https://images-na.ssl-images-amazon.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw##._V1_UX32_CR0,0,32,44_AL_.jpg"
I get no poster and the api i am using don't help, yet that thumbnail image is including various formats, one of which is 44_al which is what i would like to leave as a string in order to output it like:
function imdbLoad() {
var form = $("#usp-title").val();
var encodedTerm = encodeURIComponent(form);
$.ajax({
url: "http://imdb.wemakesites.net/api/search",
data: {
q: encodedTerm
},
crossDomain: true,
dataType: "jsonp",
success: function(data) {
$("#imdb").empty();
$.each(data.data.results, function(i, items) {
$("#imdb").append('<h2>'+i+'</h2>');
$.each(items, function(k, item) {
$("#imdb").append("<div class='col-xs-12 col-md-4'><div class='thumbnail'><img class='img-responsive' src='"+ item.thumbnail +"'><div class='caption'><h3>"+ item.title +"</h3><p>"+ item.title +"</p></div></div>");
});
});
}
});
}
Unless anyone has any other way to grab the poster url
You can either use regex to replace string part that is not required
var url = "https://images-na.ssl-images-amazon.com/images/M/MV5BMTM3MTc3OTc0NF5BMl5BanBnXkFtZTcwOTQ0OTM1MQ##._V1._CR34,0,295,440_UX32_CR0,0,32,44_AL_.jpg"
var regex = /,.*(?=,)/g;
console.log(url.replace(regex, ''))
or split using comma(,) and join first and last part.
var url = "https://images-na.ssl-images-amazon.com/images/M/MV5BMTM3MTc3OTc0NF5BMl5BanBnXkFtZTcwOTQ0OTM1MQ##._V1._CR34,0,295,440_UX32_CR0,0,32,44_AL_.jpg"
var parts = url.split(',');
console.log(parts[0] + ',' + parts.pop())
This is a bit of a longer code as I have included few bits such as limiting the number of results but basically what I noticed is that after the ## the whole string is about image size. So instead of using a regex (that would be the answer for this specific question), I could simply add the dimension to the url as a string like:
<img class='img-responsive' src='"+ thumbnailMod[0] + "#._V1_UX500_CR0,0,500,550_AL_.jpg'>
Full code
$('form[name="search-imdb"]').on("submit", function(e) {
var form = $(this);
e.preventDefault();
$.ajax({
url: "http://imdb.wemakesites.net/api/search",
data: {
api_key: "...",
q: form.find('input[name="q"]').val()
},
crossDomain: true,
dataType: "jsonp",
success: function(data) {
$("#imdb").empty();
var thumbnailMod, limiteRes = 1;
if (data.data.results.titles !== undefined) {
$("#imdb").append('<h2>Titles</h2>');
$.each(data.data.results.titles, function(i, item) {
thumbnailMod = item.thumbnail.split('#.');
if (thumbnailMod.length > 1) {
if (limiteRes > 3) {
return;
}
limiteRes++;
$("#imdb").append("<div class='col-xs-12 col-md-4'><div class='thumbnail'><img class='img-responsive' src='"+ thumbnailMod[0] + "#._V1_UX500_CR0,0,500,550_AL_.jpg'><div class='caption'><h3>"+ item.title +"</h3><p>"+ item.title +"</p></div></div>");
}
});
} else {
console.log('No titles found for this search.');
}
}
});
});
<html>
<head>
<meta charset="utf-8"/>
<script src="../JQUERY/jquery-1.11.0.js"></script>
<script>
function getOptions()
{
var html=new String();
$.ajax(
{
//url: 'http://server.com/?method=get&search=menu_group_options_with_items&type=group&group_id=6&format=json',
url: 'http://server.com',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
async: false,
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
}
});
alert("returning html");
alert(html);
return html;
}
</script>
<script>
$(document).ready(function()
{
var str="";
str=getOptions();
$('#content').append(str);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
When I would run this using the full URL nothing would happen. I wouldn't get any information back. Now that I've changed my URL just to http://server.com and set the data:{} to the requirements from the URL, I still get nothing. At this point I'm stuck and don't know where else do go.
My Questions:
What would be a reason my code isn't working?
What else do I need to do to retrieve data from the website?
async:false is deprecated after jQuery 1.8. Either use older jQuery version change your code.
To change your code, move this part into the success function:
$('#content').append(str);
I hope this helps.
Thanks
function getOptions()
{
$.ajax(
{
url: 'http://server.com/',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
$('#content').append(html);
}
});
alert("returning html");
alert(html);}
I have to use a AJAX call to get Json data after clicking next and previous buttons. Json data should contain blog content displayed after clicking next or previous. Any suggestions how my function should look like? So far I have only:
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).success(function (data) {
$.each(data, function (key, val) {
$('#blogcont').append(key+ val);
});
return false;
});
}
And my Json file is only a test file:
{"one":"test1", "two":"test2", "three":"test3" }
Sorry I am a beginner!!!!
Thanks
Your $.ajax() syntax is incorrect
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json",
success: function(data) {
var content = "";
$.each(data, function(key, val) {
content += "<p>" + key + ":" + val + "</p>";
});
$('#blogcont').html(content);
}
});
return false;
}
or
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).done(function(data) {
var content = "";
$.each(data, function(key, val) {
content += "<p>" + key + ":" + val + "</p>";
});
$('#blogcont').html(content);
});
return false;
}
Try this
function getPrev() {
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json"
}).done(function(data) {
var content = "";
$.each(data, function(key, val) {
content += '<p>' + key + ':' + val + '</p>';
});
$('#blogcont').html(content)
.find('p')
.hide()
.first().show();
$('button.next').click(function() {
$('#blogcont').find('p:visible')
.hide()
.next('p').show();
});
});
return false;
}
How about storing the JSON data as a variable, which you can then access using an index on click?
var jsonData;
$.ajax({
type: "GET",
url: "../Content/test.txt",
dataType: "json",
success: function (data) {
jsonData= data;
}
});
var clickIndex = 0;
$('.prev').click(function() {
if(clickIndex > 0) {
clickIndex -= 1;
}
get(clickIndex);
});
$('.next').click(function() {
clickIndex++;
get(clickIndex);
});
Your get function would then accept the index and find the JSON property:
function get(i) {
var item = jsonData[i];
}
Note that you would need to add an if statement to check whether you have reached the index limit on click of .next. Also, this is fine for a test JSON file, but a better solution would be to be able to request just one relevant item from a web service returning the JSON.
Ok, simple thing in javascript that I could not solve even searching on the web. I guess I even found the right thing but could not put on the right place.
This code tells me if a stream is online or offline. But how do I do to the status and keep updating every 5 seconds?
$(function () {
$.ajax({
type: 'GET',
url: "http://xmychannelx.api.channel.livestream.com/2.0/livestatus.json?callback=?",
dataType: 'jsonp',
success: function (jsonp) {
// parse the JSON data on success
var channel = eval(jsonp);
liveChannel = channel.channel.isLive;
if (liveChannel == true) {
document.getElementById('mydiv').innerHTML = '<p style="color: #00FF00">Online!</p>';
} else {
document.getElementById('mydiv').innerHTML = '<p style="color: #C0C0C0">Offline!</p>';
}
}
});
});
Example :
var myAjaxCall = function() {
$.ajax({
type: "GET",
url: options.feedUrl,
dataType: "xml",
async:options.sync,
success: function(xml) {
// todo
}
};
var ResInterval = window.setInterval(myAjaxCall, 60000); // 60 seconds
To Stop:
window.clearInterval(ResInterval);
use set time out function
setTimeout(function(){
//your function
foo();
},1000);
Try this out:
function checkStatus() {
$.ajax({
type: 'GET',
url: "http://xmychannelx.api.channel.livestream.com/2.0/livestatus.json?callback=?",
dataType: 'jsonp',
success: function (jsonp) {
// parse the JSON data on success
var channel = eval(jsonp);
liveChannel = channel.channel.isLive;
if (liveChannel == true) {
document.getElementById('mydiv').innerHTML = '<p style="color: #00FF00">Online!</p>';
} else{
document.getElementById('mydiv').innerHTML = '<p style="color: #C0C0C0">Offline!</p>';
}
}
});
}
$(function() {
setInterval(checkStatus, 5000);
});
This calls the function checkStatus every 5000 milliseconds (5 seconds).
I'm trying to do an autocomplete to my textbox, but it doesn't work. Follow my code.
$(function () {
var credenciada = '<%= credenciadaId %>';
xml_NomeCompleto = "";
var Nomes = "";
var retorno = '';
var count = 0;
var t = '';
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
t = $(this).find("NOMECOMPLETOUSUARIO").text();
Nomes += ["\"" + t + "\","];
});
}
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
});
The variable 't' receives all the names of my users, normally, but the autocomplete don't work.
Wait for ajax response to complete and then initialize the autocomplete because before you initialize the plugin data is not available. Also the way you are creating Nomes(source) is wrong. Declare it as an array and use push method to populate it.
Try this
var Nomes = [];
$.ajax({
url: "../Xml/AcessoExterno.aspx?Credenciada=" + credenciada,
type: "get",
dataType: 'xml',
async: false,
success: function (data) {
$(data).find("REGISTRO").each(function () {
Nomes.push($(this).find("NOMECOMPLETOUSUARIO").text());
});
$("#ctl00_contentConteudo_txtNome").autocomplete({ source: Nomes });
}
});