Printing HTML Attritbutes with jquery in a loop - javascript

i try to loop trough Objects in a Database (parse.com) and would like to print these results with attributes from Bootstrap. I'm a beginner and don't understand why it's not possible how i did it. i know there is .attr() but i don't get it how i can use this in my example.
This is my code:
var Insider = Parse.Object.extend("Insider");
function getPosts() {
var query = new Parse.Query(Insider);
query.find({
success: function(results) {
var output = "";
for (var i in results) {
var name = results[i].get("name");
var catego = results[i].get("cate");
var imageurl = results[i].get("image");
var tpp = results[i].get("tipp");
output += "<ul class="media-list">";
output += "<li class="media">";
output += "<div class="media-left">";
output += "<a href="#">";
output += "<img id = "two" class="media-object"
alt="...">"
output += "<h4>+ + name + "</h4>";
output += "</a>"
output += "</div>"
}
$("#list").html(output);
},
error: function(error){
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
Any help much appreciated!

Related

Cant access object that have been declare on javascript

I'm trying to get some value over my server using jquery's $.get method and store the result in an object.
What I'm doing is running my function inside a loop:
function renderTabelScheduledEmploye(employees) {
$('#containerDataStaff').empty();
let record = '';
let count = 1;
if (employees.length > 0) {
$.each(employees, function(key, value) {
getFromServerScheduleCount(employees[key].schedule_employee_id);
console.log(scheduleCountData);
record += '<tr>';
record += '<td>' + count + '</td>';
record += '<td>( ' + employees[key].emp_kode + ') - ' + employees[key].emp_full_name + '</td>';
record += '<td>' + scheduleCountData[0].work + '</td>';
record += '<td>' + scheduleCountData[0].offDay + '</td>';
record += '<td>' + scheduleCountData[0].leave + '</td>';
record += '<td>' + scheduleCountData[0].shiftCount + '</td>';
record += '<td>Set Shift</td>';
record += '</tr>';
count++;
});
}
$('#containerDataStaff').append(record);
}
Then I create a function to retrieve JSON data from my server using the $.get function, then store the data result to an object that has been declared:
var scheduleCountData = new Object();
function getFromServerScheduleCount(schedule_employee_id) {
let url = `{{ url('/departement/schedule/manage/schedule/count') }}`;
url = url + '/' + schedule_employee_id + '/get';
let data = {};
$.get(url, function(data) {
let obj = JSON.parse(data);
data.work = obj.work;
data.dayOff = obj.dayOff;
data.leave = obj.leave;
data.shifts = obj.shifts;
scheduleCountData.new = data;
})
}
I can see in the console that the object has filled with the data
[object success to fill][1]
But when i try to access in code like this
scheduleCountData[0]
and log the result to to the console, it shows undefined.
This little bit frustrating for me. I hope someone can help me. Thanks for community.
EDIT :
Sorry i miss
i try to call that object with code like this
scheduleCountData.new
but still undefined on console
Seems youre not waiting for the load to finish before trying to use the data:
// This has a get call, which is async (takes time to load)
getFromServerScheduleCount(employees[key].schedule_employee_id);
// The script will continue, without waiting for the load to finish, so can be empty
console.log(scheduleCountData);
I would suggest adding a callback, like this:
getFromServerScheduleCount(employees[key].schedule_employee_id, function(scheduleCountData) {
console.log(scheduleCountData);
});
function getFromServerScheduleCount(schedule_employee_id, callback) {
$.get(url, function(data) {
// ...
callback(data);
});
}

Facebook Graph API response javascript

I want to get name and picture of every friend. please tell me how can i handle this. I am getting no row and finding an error "Uncaught TypeError: Cannot set property 'innerHTML' of null"
FB.api('/me/friends','GET',{"fields":"id,name,email,picture.height(500)"},
function(response) {
console.log(response.total_count);
var result_holder = document.getElementById('result_friends');
// var friend_data = response.data.sort();//sort(sortMethod);
var results = '';
document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
for (var i = 0; i < friend_data.length; i++) {
console.log(i + results);
results += '<div><img src="https://graph.facebook.com/' + friend_data[i].id + '/picture">' + friend_data[i].name + '</div>';
}
// and display them at our holder element
result_holder.innerHTML = '<h2>Result list of your friends:</h2>' + results;});
This line is wrong: document.getElementById('friends_data').innerHTML = 'Name :::' + response.name;
There will be an array in response (response.data), and in that array there will be the friends with their names.
Remove the line and use the for loop like this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="https://graph.facebook.com/' + response.data[i].id + '/picture">' + response.data[i].name + '</div>';
}
Or, since you already get the picture URL in the response, try this:
for (var i = 0; i < response.data.length; i++) {
results += '<div><img src="' + response.data[i].picture.data.url + '">' + response.data[i].name + '</div>';
}
Btw, it is better to just debug with console.log(response) at the beginning of the callback, so you can see what exactly is in the response. Just saying.

javascript $_GetJSON from .php file

I have a PHP file (GenerateJson.php) that uses json_encode to produce JSON data from my database, I know I can have that same PHP file write to a .json file but if I do that the written JSON will only contain the data from the last time the GenerateJson.php the requested and I want to javascript to be able to access live data on the fly
currently my code is is this:
$('#search').keyup(function() {
var searchField = $('#search').val();
var myExp = new RegExp(searchField, 'i');
$.getJSON('Generated.json', function(data) {
var output = '<ul class="searchresult1">';
$.each(data.data, function(key, val) {
if ((val.artists.Artist.search(myExp) != -1)) {
var ArtistURL = "music/abArtist.php?artist=" + encodeURIComponent(val.artists.Artist);
output += '<li>';
output += '<h2>' + val.artists.Artist + '</h2>';
output += '</li>';
}
});
output += '</ul>';
$('#update1').html(output);
});
});
When I replace "Generated.json" with "GenerateJson.php"
This javascript don't work anymore...
What is a good and simple fix? to get this to work with "GenerateJson.php" and how?
Thanks!
If you want to get the JSON data dynamically from PHP you can try the following
$.ajax({
dataType: 'json',
url: 'GenerateJson.php',
done(function( data ) {
var output = '<ul class="searchresult1">';
$.each(data.data, function(key, val) {
if ((val.artists.Artist.search(myExp) != -1)) {
var ArtistURL = "music/abArtist.php?artist=" + encodeURIComponent(val.artists.Artist);
output += '<li>';
output += '<h2>' + val.artists.Artist + '</h2>';
output += '</li>';
}
});
output += '</ul>';
$('#update1').html(output);
});

Use jquery to get jsondata

I want to use .getJSON to get data from server. The data can get, but it can not display in page.
js code:
$(function(){
alert(1);
$("#jsondata").bind("click",function()
{
var data = "action=getdata";
alert(2);
$.getJSON("Guess.php",data, function(json)
{
alert(3);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
$.each(json,function(i,v){
str += '<tr><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.tel+'</td></tr>';
});
str += '</table>';
$("#datashow").append(str);
});
});
});
html code:
<button id="jsondata" name="jsondata" accesskey="g">GetData</button>
<div id="datashow"></div>
The data I got from server display in fire bug:
{"name":"Tom","sex":"male","tel":"456","email":"sdfd#15.com"}
The json parameter for success function should already be parsed as JSON, so loop with a normal loop:
$(function(){
alert(1);
$("#jsondata").bind("click",function()
{
var data = "action=getdata";
alert(2);
$.getJSON("Guess.php",data, function(json)
{
alert(3);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
for(var i in json) {
str += '<tr><td>' + i.name + '</td><td>' + i.sex + '</td><td>' + i.tel + '</td></tr>';
}
str += '</table>';
$("#datashow").append(str);
});
});
});
Try this: (There is no need to loop with $.each)
$(function () {
$("#jsondata").bind("click", function () {
var data = "action=getdata";
$.getJSON("Guess.php", data, function (json) {
var str = '<table><tr><td>日期</td><td>1#铸机产量</td><td>2#铸机产量</td></tr>';
str += '<tr><td>' + json.name + '</td><td>' + json.sex + '</td><td>' + json.tel + '</td></tr>';
str += '</table>';
$("#datashow").append(str);
});
});
});
Try the following code.
$.getJSON("Guess.php",data, function(json) {
// Convert json reponse object to array
json = $.makeArray(json);
var str = '<table><tr><td>Name</td><td>1#Sex</td><td>2#Tel</td></tr>';
$.each(json,function(i,v){
str += '<tr><td>'+v.name+'</td><td>'+v.sex+'</td><td>'+v.tel+'</td></tr>';
});
str += '</table>';
$("#datashow").append(str);
});
});

Can't return only usernames from json data fetched through a php page

I am able to get json data from an external php page and print it on the JavaScript console. But these are in the form objects. The following is the data I recieved on my console:
[{"id":"1","username":"iammuneeb","password":"4297f44b13955235245b2497399d7a93","name":"Mirza Muneeb"},{"id":"2","username":"iamfaiz","password":"4297f44b13955235245b2497399d7a93","name":"Faiz"}]
How can I extract only username and turn it into an ordered list. (ol)
This is what I have done so far:
$(document).ready(function (e) {
$('#delete').click(function (e) {
var jsonData = getResultsInJson(username);
jsonData.success(function (data) {
var output = "<ol>";
for (var i in data) {
output += "<li>" + data.username + "</li>";
}
output += "</ol>";
$('#placeholder').html(data);
console.log(data.username);
});
});
});
This is getResultsInJson():
function getResultsInJson(sql) {
return $.ajax({
url: 'commands.php',
data: 'results=' + sql,
dataType: 'json'
});
}
when you use the for(x in y) format, x is the key, and y is the array or object. Since i is just the key, you need to use it as one:
for (var i in data) {
output += "<li>" + data[i].username + "</li>";
}
Do you need them in alphabetically?
Try something like this:
$(document).ready(function() {
var json = [{"id":"1","username":"iammuneeb","password":"4297f44b13955235245b2497399d7a93","name":"Mirza Muneeb"},{"id":"2","username":"iamfaiz","password":"4297f44b13955235245b2497399d7a93","name":"Faiz"}];
var usernames = new Array();
$.each(json, function(index, object) {
usernames[index] = object.username;
});
var sorted = usernames.sort();
var output = '';
$.each(sorted, function(index, value) {
output += '<li>' + value + '</li>';
});
$('#placeholder').html('<ol>' + output + '</ol>');
});

Categories