We Keep Coding

Steam webAPI Jquery script. return

I have a problem with this script I got from github.
I added value.appid myself because that seemed logical but I believe it data.response.games is a response for all my games and its values.
How do I get them to either print or see what is defined?
I would need something like value.description or maybe value.ownedAchievements.
I want to see what data i have to work with for the CSV.
I am a complete noob with this so be nice, also too expert comments I will have no clue what to do with cause I have never touched javascript in my life before.
I am currently learning HTML CSS and PHP.
I have a Docker running with my SQL as well... is there also a way to re-engineer this script to directly put these value.* values inside a column? without the need to download a CSV and import it manually all the time.
<script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function () {
function exportSteamToCSV(filename) {
var url = "http://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=" + $('#webkey').val() + "&steamid=" + $('#steamid').val() + "&format=json&include_appinfo=1";
$.get(url, function(data) {
colDelim = ',';
rowDelim = '"\r\n"';
csv = '"Name","Playtime","Store' + rowDelim;
$.each(data.response.games, function(index, value) {
url = "http://store.steampowered.com/app/" + value.appid;
csv += value.name + colDelim + value.playtime_forever + colDelim + value.appid + colDelim + url + rowDelim;
//csv += value.name + colDelim + value.playtime_forever + colDelim + url + rowDelim; Was correct eerste versie
});
csv += '"';
csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
var link = document.createElement("a");
link.download = filename;
link.href = csvData;
link.target = "_blank";
link.click();
});
};
$(".export").on('click', function (event) {
// CSV
exportSteamToCSV.apply(this, ['steamgames.csv']);
});
});
</script>

Solved this later in Laravel with the query from the APU. the URL just gets all the data.. from there you casn pretty much do anything.
$url = "https://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=XXXXXXXXXX&steamid=XXXXXXXXXXformat=json&include_appinfo=1";
$jsondata = file_get_contents($url);
$parsed = json_decode($jsondata,true);
$games = $parsed['response']['games'];
echo SteamGame::count();
foreach($games as $game){
echo $game['name']."<br>";
$imgid = $game['appid'];
SteamGame::updateOrCreate(['name' => $game['name']],[
'name' => $game['name'],
'appID' => $game['appid'],
'storeURL' => "https://store.steampowered.com/app/".$game['appid'],
'imageURL' => "https://cdn.akamai.steamstatic.com/steam/apps/${imgid}/header.jpg",
'minutesplayed' => $game['playtime_forever']
]);

Setting VideoJS Source via Javascript

I'm trying to set the source and type for Video.js dynamically via a JSON object that is retrieved from a remote method call.
radioPlayer = videojs("RadioPlayer");
function RadioListPage() {
$.getJSON(serviceURL + 'rbApp.cfc?method=Radio', function(data) {
$.each(data.DATA, function(index, itemData) {
$('#radioList').append('<div class="play" data-type="' + itemData[4] + '" data-src="' + itemData[3] + '" data-station="' + itemData[1] + '" data-id="' + itemData[0] + '"><img src="' + itemData[2] + '"></div>');
lastIDNumberVideo = itemData[0];
});
$('#radioList .play').click(function() {
var stationObject = new Object();
stationObject.src = $(this).data("src");
stationObject.type = $(this).data("type");
var jsonStr = JSON.stringify(stationObject);
radioPlayer.src(jsonStr);
radioPlayer.play();
});
loading('hide', 100);
});
}
VideoJS will throw an error that the stream isn't valid. However, if I take that jsonStr variable and hard code that value like this radioPlayer.src({"src":"http://wlca-stream.lc.edu:8004/wlca","type":"audio/mpeg"}) it plays with no issue. What am I missing here? Is this not possible to do?

The example code you show provides a JS object to the src() method, yet you're providing JSON. Try providing the object directly to the method.
Also note that I'd suggest you use a delegated event handler instead of binding events in the AJAX callback, which can lead to issues with duplicated events. Try this:
radioPlayer = videojs("RadioPlayer");
$('#radioList').on('click', '.play', function() {
radioPlayer.src({
src: $(this).data("src"),
type: $(this).data("type")
});
radioPlayer.play();
});
function RadioListPage() {
$.getJSON(serviceURL + 'rbApp.cfc?method=Radio', function(data) {
let html = data.DATA.map(item => `<div class="play" data-type="${item[4]}" data-src="${item[3]}" data-station="${item[1]}" data-id="${item[0]}"><img src="${item[2]}"></div>`);
$('#radioList').append(html);
lastIDNumberVideo = data.DATA.slice(-1)[0];
loading('hide', 100);
});
}

Append image in function jquery

Good evening.
I have this jquery code which allows me, once you press the Enter key, to post a comment.
Fattio that I run an append with the username and the content that the user wants to publish.
In addition to the username I would also like to "hang" the profile picture using their path. How do I post a photo?
Thanks for your help. Here's the code:
function commento_post(id_post)
{
$('.form-commento'+id_post).click(function ()
{
$('#ins_commento'+id_post).keydown(function (e)
{
var message = $("#commento"+id_post).val();
var username = $("#username").val();
var id_user = $("#id_user").val();
if(e.keyCode === 13)
{
$.ajax(
{
type: 'POST',
url: 'http://localhost/laravel/public/index.php/post/ins_commento',
data: { commento: message, id_post: id_post },
success: function(data)
{
$('#commento'+id_post).val('');
$('#commentscontainer'+id_post).append
(
/*$(".username-commento"+id_post).html
(*/
$('<a/>',
{
text : username, href : 'http://localhost/laravel/public/index.php/utente/'+id_user
}).css({'font-weight':'bold'})
//)
).append(' ').append(message).append($('<br/>'));
var el = $('#numero_commenti'+id_post);
var num = parseInt(el.text());
el.text(num + 1);
}
});
}
});
});
}

In your success function, you could simplify everything quite a bit in the following way while not using jQuery append so much, but just using a variable to store your code and then appending it in one go. This will allow you to append all sort of elements, it's easily parseable for the you and it reduces the amount of calls you have to make.
// Add whatever you want your final HTML to look like to this variable
var html = "<a href='http://localhost/laravel/public/index.php/utente/" + id_user + "' style='font-weight: bold;'>" + username + "</a>";
html += message;
// add an image
html += "<img src='path/to/image.jpg' />"
html += "<br />";
// append to code you constructed above in one go
$('#commentscontainer' + id_post).append(html);
Update
I amended an incorrect quote and changed + id_user + "to + id_user + "', which makes everything after it work.

Retrieve XML Data to use webpage

What I am trying to do:
Get location based off of IP (Done)
Use the City and Country code to use openweather's API (Done)
Read the XML into my webpage so that I can display the "Temperature" field.
This is my first venture into using XML in webpages, and I've tried for 3 days now with no success. I have searched google and stackoverflow, and have tried many things so far, including SimpleXMLElement, with no luck.
What I currently have on my page is just a generated link to the XML sheet for your location.
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript">
var country = geoip_country_code();
var city = geoip_city();
document.write('Link text');
</script>
How am I able to display the text from the required field on my page?
Thanks in advance! :)

It might be easier to change the API call to return JSON, in which case you could then use this code, the temps are stored in temp, temp_min and temp_max.
var country = geoip_country_code();
var city = geoip_city();
$.getJSON('http://api.openweathermap.org/data/2.5/weather?q=' + city + ',' + country + '&mode=json&units=metric', function( json ) {
var temp = json.main.temp;
var temp_min = json.main.temp_min;
var temp_max = json.main.temp_max;
document.write( 'Temp: ' + temp + '<br>');
document.write( 'Temp Min: ' + temp_min + '<br>');
document.write( 'Temp Max: ' + temp_max + '<br>');
});

You could use javascript library to convert the xml into a javascript object - one such library is called xml2json, it works as a jQuery plugin: http://www.fyneworks.com/jquery/xml-to-json/
Then you can simply do:
var xmlObject;
$.ajax({
url: url_of_xml,
success: function(data) {
xmlObject = $.xml2json(data);
}
});
Then you just need to place the data on your page. The object in my example is faked, but it gives you the idea:
// put this line in the success callback of your ajax call
// after you create the xmlObject
$('#temp').html(xmlObject.weather.temp);

To display the temperature you get the XML, and read one of the three temperature attributes from the XML returned:
$.get("http://api.openweathermap.org/data/2.5/weather?q=' + city + ',' + country + '&mode=xml&units=metric", function(xml) {
avg = $(xml).find("temperature").attr("value"));
max = $(xml).find("temperature").attr("max"));
min = $(xml).find("temperature").attr("min"));
(using JQuery)

How to get more JSON data on scroll or while scrolling?

I have the following code below which returns some results when the user searches a term.
Once i get some results,I want to add feature which will allow me to get more data when scrolling down ward?
NOTE: I dont want to use any plugin(s).
$(document).ready(function() {
$("#submit").click(function (event) { // wire up this as an onclick event to the submit button.
var searchTerm = $("#search").val(); // get the user-entered search term
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
//var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "25053835#N03";
//var MYID-"84215563#N08";
//var tagmode="&tagmode=any";
//var format ="&format=json";
var tags="&tags="+ searchTerm;
var tagmode="&tagmode=any";
var jsonFormat = "&format=json&jsoncallback=?";
var ajaxURL= URL+"?jsoncallback=?id="+ID+tags+tagmode+jsonFormat;
//var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;
$.getJSON(ajaxURL,function(data){
//$("h1").text(data.title);
//alert(data.length);
var photoHTML;
$("#photos").empty();
if (data.items.length) {
alert(data.items.length);
$.each(data.items, function(i,photo) {
//var photoHTML = "<h4>" +photo.tags + "</h4>";
photoHTML = "<p>";
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';
photoHTML = "</p>";
$('#photos').append(photoHTML).fadeIn(200);
});
} else {
alert(data.items.length);
photoHTML = "<h2> No Results</h2>";
$('#photos').append(photoHTML).fadeIn(200);
}
//$('#photos').append(photoHTML).fadeIn(200);
});
});
});

You could use the jquery .scroll() method. You have two options, save all data when page loads then display as user scrolls OR make ajax request every time there is a scroll down request.
$("#yourSelector").on('scroll', function(){
// do stuff
});
or simply using the shortcut:
$("#yourSelector").scroll(function(){
// do stuff
});
I hope this helps!
Here is a link to jquery scroll api to know about the options (such as specifying scroll DOWN): http://api.jquery.com/scroll/

You can also bind scroll event using jquery:
Put your whole code into a function:
function myfun(){
//-- you code
}
and call myfun() from both event:
on click event-
$("#submit").click(function (event) {
myfun();
});
on scroll event -
$("#yourSelector").scroll(function(){
myfun();
});