for each loop in javascript with json data - javascript

I have the following code, which is a restful json api.
// Program guide Rest
$(document).ready(function() {
$.ajax({
cache: false,
url: "http://engridmedia.com/next/api/epg/scheduler/id/200",
type: 'GET',
crossDomain: true,
dataType: 'json',
success: function() {
alert("EPG Success");
},
error: function() {
alert('EPG Failed!');
},
})
.then(function(data) {
for (var i = 0; i < 6; ++i)
{
var prefix = (i == 0 ? "" : i.toString());
$('.programtitle' + prefix).append(data[i].program_title);
$('.ch-start' + prefix).append(data[i].start_time);
$('.ch-end' + prefix).append(data[i].end_time);
$('.ch-programdesc' + prefix).append(data[i].desc);
}
});
I want to use the data in my phonegap html . that means i would have to call each data by doing this a bunch of times since i will have over 20 data in the array and sometimes less. is there a for each loop in javascript to do this easily like echoing data from the database in php?
<?php foreach ($query as $row)
{ ;?>
<h3><?php echo $row -> program_title; ?> | <?php echo $row -> start_time; ?> | <?php echo $row -> end_time; ?></h3>
<div>
<p>
<?php echo $row -> desc; ?>
</p>
</div>
<?php } ?>

As ja408 sayed you should use this syntax in javascript :
for(var k in yourJson) {
console.log(k, result[k]);
}
Thanks

Related

'Unexpected token ;' when trying to pass PHP variable in jQuery AJAX request

So im trying to run a PHP script that sets a deleted field in the database to poplulate if you drag a certain text element to the droppable area.
At the moment i have this droppable area:
<div class="dropbin" id="dropbin" >
<span class="fa fa-trash-o noSelect hover-cursor" style="font-size: 20pt; line-height: 225px;"> </span>
</div>
and this draggable text:
<div id='dragme' data-toggle='modal' data-target='#editNoteNameModal' class='display-inline'>" . $data['NoteName'] . "</div>
The area im having an issue with is this:
$("#dropbin").droppable
({
accept: '#dragme',
hoverClass: "drag-enter",
drop: function(event)
{
var noteid = <?php if(isset($_POST['noteid'])){ echo $_POST['noteid'];} ?>;
var deletedby = <? if(isset($_SESSION['username'])){ echo $_SESSION['username'];} ?>
var data = {noteid1: noteid, deletedby1: deletedby};
if (confirm('Delete the note?')==true)
{
$('#dragme').hide();
debugger
$.ajax({
type: 'POST',
url: 'deleteNote.php',
datatype: 'json',
data: data,
success: function(result)
{
alert("Success");
}
});
window.location = "http://discovertheplanet.net/general_notes.php";
}
else
{
window.location = "http://discovertheplanet.net/general_notes.php";
}
}
});
EDIT: The line i get the error on is:
var noteid = <?php if(isset($_POST['noteid'])){ echo $_POST['noteid'];} ?>;
Im currently getting an "Unexpected token ;" and its stopping the droppable from working.
Just a side note, if i run it without the variables it hits everything apart from:
url: 'deleteNote.php',
Also inside deleteNote.php is this incase it helps:
<?php
include "connectionDetails.php";
?>
<?php
if (isset($_POST['noteid1'], $_POST['deletedby1']))
{
$noteid2 = $_POST['noteid1'];
$deletedby2 = $_POST['deletedby1'];
// echo "Hello...". $noteid;
$stmt = "UPDATE Notes SET Deleted = GETDATE() WHERE NoteID = (?)";
$params = array($noteid2);
$stmt = sqlsrv_query($conn, $stmt, $params);
if ($stmt === false)
{
die( print_r(sqlsrv_errors(), true));
}
}
else
{
echo "No Data";
}
?>
(I deliberatley don't have deletedby in the database just yet, ignore that)
Could anyone possibly help me to get this to work?
Try to add quotes in these lines and add php after <? in second line:
var noteid = "<?php if(isset($_POST['noteid'])){ echo $_POST['noteid'];} ?>";
var deletedby = "<?php if(isset($_SESSION['username'])){ echo $_SESSION['username'];} ?>";
OR
var noteid = "<?=isset($_POST['noteid']) ? $_POST['noteid'] : "" ?>";
var deletedby = "<?=isset($_SESSION['username']) ? $_SESSION['username'] : "" ?>";

I can not display the data from my json_encode ($.each)

Hello to every one and thank you for your time.
My problem is that i can not display the json_encode from my php database but in my chrome the data is appear.
The $.each is not dispaly all only one
enter image description here
now the code for the php :
comment.php
$data = $_REQUEST;
$photo_id =38;//$data['photo_id_comment'];
$con = mysqli_connect('localhost','root','','gallery');
$sql = "SELECT * FROM comments";
$sql .= " WHERE photo_id = " . $database->escape_string($photo_id);
$sql .= " ORDER BY photo_id ASC";
$result = mysqli_query( $con,$sql);
$arr = array();
$row_count = mysqli_num_rows($result);
while ($row = mysqli_fetch_array($result)) {
array_push($arr , $row);
}
mysqli_close($con);
echo json_encode($arr);
And the ajax to retrieve data is: script.js
function refreshComment() {
requestData = $("#photo_id_comment").serialize();
$.ajax({
url: "http://localhost/udemy/app_php/includes/comment.php",
type: "get",
data: requestData,
dataType: "text",
success : function (data) {
jQuery.each(data, function(index, item) {
//now you can access properties using dot notation
$('#chat_box').val( $('#chat_box').val() + item.body + '\n');
/* $('#author_comment').html(item.author);
$('#chat_box').html(item.body);*/
});
},
error: function (http, status, error) {
alert('Some error occurred :'+error);
}
});
return false;
}
setInterval( refreshComment , 5000 );
And the html where the data is not display is: photo.php.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 id="author_comment" class="media-heading"></h4>
<p id="chat_box"></p>
<p class="text-info">This is post at: </p>
</div>
</div>
Please try this one,
$sql = "SELECT * FROM comments WHERE photo_id = " . $database->escape_string($photo_id) ORDER BY photo_id ASC";
$result = mysqli_query( $con,$sql);
$arr = array();
while ($row = mysqli_fetch_array($result)){
$arr[] = $row;
}
echo json_encode($arr);
and change ,
dataType:'json' instead of dataType:'text'
in script.
change dataType:text to dataType:JSON
EDIT
use this instead of $.each
for(var i = 0;i < data.length ; i++)
{
/*access data as data[i].orfeas*/
}
PHP
$array = array();
$i = 0;`
foreach($res as $r){
$array[$i] = $r;
$i++;
}
header('Content-Type:Application/json');
echo json_encode($array);
EDIT2
USE Header to help jQuery to identify the response type and then jQuery will parse the JSON and you can access it by using a loop above mentioned
in your script.js file make change on success function of ajax:-
success : function (data) {
$.each($.parseJSON(data), function(key,item){
$('#chat_box').val( $('#chat_box').val() + item.body + '\n');
});
}

Why does my jQuery Ajax GET-request not receive a response from the server?

I am trying to let jQuery dynamically add html to my page. Unfortunately, I don't receive a response from my server. My JS code sends a GET request, which contains a parameter (bodypart). The server should return a response including the results from the database, but the response is empty.
What causes this problem?
JAVASCRIPT:
function getData() {
var sPanelHeading = '<div class="col-lg-3"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">Symptomen van ' + bodypart + '</h3></div>';
$( "#abc" ).append(sPanelHeading);
$.ajax({
url: 'controller.php',
data: 'bodypart=Autism',
dataType: 'json',
}).done(function(data) {
$( "#abc" ).append('<div class="panel-body" style="overflow-y: scroll;"><span class="list-group-item"><b>Vaak voorkomende symptomen</b></span></div><div class="list-group">');
for (var c in data) {
$("#abc").append('<span class="list-group-item">');
$("#abc").append(c);
$("#abc").append('</span">');
}
}).always(function(data) {
console.log(data);
});
}
PHP:
<?php
require_once( 'config.php' );
$bodypart = $_GET['bodypart'];
$sql = "SELECT c_name FROM condition WHERE c_name = '$bodypart'";
$result = $conn->query($sql);
$json_response = array();
if ($result->num_rows > 0) {
while($row = mysql_fetch_assoc($query)) {
$json_response[] = $row;
}
print json_encode($json_response);
}
$conn->close();
?>
1st : instead of
data: 'bodypart=Autism',
use
data: {'bodypart':'Autism'},
2nd
echo json_encode($json_response);
Basics of $.ajax
$.ajax({
url: 'controller.php',
type: 'GET',
data: {'bodypart':'Autism'},
dataType: 'json',
success : function(data){
alert(data);
}
});
in php
<?php
$bodypart = $_GET['bodypart'];
echo $bodypart;
?>
output should alert Autism .. if this Ok you can complete your stuff .. if something went wrong .. check your php file path

passing data from view to controller in cakephp

I have an javascript array variable in my view file , how can i send the array to different controller ?
this is html code:
<button id=<?php echo $key ?> onclick="movebutton(this)" class='li'><?php echo $officers['Officer']['name'] ?> </button>
and this is my javascript code:
function movebutton(elem){
var teamMember=new Array();
if( $(elem).parent().attr("class") == "officers_list" ){
$(elem).detach().appendTo('.add_member');
teamMember.push($(elem));
}
else{
$(elem).detach().appendTo('.officers_list');
teamMember.pop($(elem));
}
You can pass any data to controller using ajax -:
Get values you want to a javascript variable and check a sample ajax
$.ajax({
dataType: "html",
type: "POST",
evalScripts: true,
url: '<?php echo Router::url(array(
'controller'=>'controller','action'=>'action'));?>',
data: ({type:variable-value }),
success: function (data){
return true;
// $("#div").html(data);
}
});
To pass data from view to controller:
You can use form but in form your data won't be sent as an array
Using ajax
.
var data = {
val1 = '<?php echo $string ?>';
val2 = '<?php echo $number ?>';
}
$.post( 'controller/action', data , function(response) {
if (response == true) {
// Do this
} else {
// Do that
}
});

pass javascript array to PHP script using ajax

I am passing an array from javascript to PHP using ajax. This is the code I have so far.
<?php
$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
$range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
<br><?php echo "Keyword" ?>
<?php echo $i -1 ?>
<br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
<?php } ?>
<button type="button" >Update</button>
<head>
<script>
var parms = [];
$("[data-slider]")
.each(function () {
var range;
var input = $(this);
$("<span>").addClass("output")
.insertAfter(input);
range = input.data("slider-range").split(",");
$("<span>").addClass("range")
.html(range[0])
.insertBefore(input);
$("<span>").addClass("range")
.html(range[1])
.insertAfter(input);
})
.bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first")
.html(data.value.toFixed(2));
});
$(".output")
.each(function () {
parms.push($(this).text());
});
function loadXMLDoc(parms) {
$.ajax({
type: "POST",
url: "update.php",
data: {
value: $(parms).serializeArray()
},
success: function (data) {
alert(data);
}
});
}
$("button").on('click', function () {
loadXMLDoc(parms);
});
alert(parms);
</script>
</head>
On click of button, I am trying to call the PHP script to edit the display of my web page. However, the ajax call to the below PHP statement alerts only the "Am I printed" line.
<?php
$uid = $_POST['value'];
echo "Am I printed";
echo $uid;
// Do whatever you want with the $uid
?>
Why is the $uid value not returned to my javascript? Is there something am doing wrong?

Categories

Resources