We Keep Coding

data.length is not defined

I want to get the length of data, when i try console.log(data) i got all of data but console.log(data.length) is undefined.
function tampilesai(idsoal){
$.ajax({
url: "soalesai/baca/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
console.log(data); //here <=================
console.log(data.length); //here <=============
var html = "";
for (i = 0; i < data.length; ++i) {
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
i need data.length for loop and fill my table. its data log
{idesai: "90", idsoal: "1", noesai: "1", matakuliah: "1", isiesai: "<p>asdd</p>"}
this image browser

If your data is an Object then you need to use Object.keys(data).length instead to get the length of the data object.

Try the following...
Convert the result data into JSON object. Although the return type was explicitly stated as JSON, but some version of jQuery may not parse it automatically. I ran into such bug with some version 2.x
var data = $.parseJSON(data);
// console.log(data.length) *should return 1
var html = "";
$.each(data, function(c) {
html += "<tr>" +
"<td class='isitbl'>" + c.idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + c.noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + c.matakuliah + "</td>" +
"<td>" + c.isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data[i]-id='" + c.idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
});
$("tbody#tblesai").html(html);
I have not tested this, but I think it will give you an alternative idea.

Finish..
function tampilesai(idsoal){
$.ajax({
url: "soalesai/ambil/"+idsoal,
type: "POST",
dataType: "JSON",
success: function(data){
var html = "";
for(i=0;i<data.length;i++){
html += "<tr>" +
"<td class='isitbl'>" + data[i].idsoal + "</td>" +
"<td class='isitbl' style='width:20px;'>" + data[i].noesai + "</td>" +
"<td class='isitbl' style='width:200px;'>" + data[i].matakuliah + "</td>" +
"<td>" + data[i].isiesai + "</td>" +
"<td class='isitbl'><button class='btn btn-danger btn-block' id='hapus' data-id='" + data[i].idsoal + "'>" +
"<span class='icon-trash'></span> Hapus</button>" +
"</td>" +
"</tr>";
}
$("tbody#tblesai").html(html);
}
})
}
i change my controller
public function ambil($idsoal){
echo json_encode(
$this->pertanyaan_model
->ambilsoal($idsoal)->result());
}
and my model..
public function ambilsoal($idsoal){
$query = $this->db
->where("idsoal",$idsoal)
->get("tblsoalesai");
return $query;
}
and its works, thanks guys try to help me.. love you

Converting the text into a clickable Link

I have a web application, which displays the result parsed from an XML file in the form of table using ajax. It is working good, but the thing is, the data in the XML file is mostly URLs but I am seeing the result in the form of text. I want that text to be made/converted into a clickable link so that it would make my life easier. Is there any code which would make it possible? If yes, please let me know where should I place it. That code is in ASPX page which also has the html code which is responsible for the style of my webpage..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="Scripts/jquery-3.2.1.js"></script>
<script language="javascript" type="text/javascript">
var CheckImage = "<img src='images/check.png' height='25' width='25'>";
var CrossImage = "<img src='images/cross.png' height='25' width='25'>";
var Fail = "<img src='images/fail.png' height='25' width='30'>";
setInterval(url, 100);
setInterval(redirects, 100);
function url()
{
$.ajax(
{
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
cache: false,
success: function (xml)
{
var tableContent1 = "<table border='1' cellspacing='0' cellpadding='5'>" +
"<tr>" +
"<th>SiteName</th>" +
"<th>URLType</th>" +
"<th>DNSStatus</th>" +
"<th>TargetStatus</th>" +
"<th>TTL</th>" +
"<th>SSL</th>" +
"<th>Force</th>" +
"</tr>";
$(xml).find('ProdURL').each(function ()
{
tableContent1 += "<tr>" +
"<td>" + $(this).attr('ProdHost') + "</td>" +
"<td>" + $(this).attr('URLType') + "</td>" +
"<td>" + ($(this).attr('DNSStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + ($(this).attr('TargetStatus') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('TTL') + "</td>" +
"<td>" + ($(this).attr('SSL') == "OK" ? CheckImage : CrossImage) + "</td>" +
"<td>" + $(this).attr('Force') + "</td>" +
"</tr>";
});
tableContent1 += "</table>";
$("#UpdatePanel").html(tableContent1)
getdata(tableContent1);
}
});
}
function redirects()
{
//this ajax code parses the information from XML file and displays it on the table
$.ajax(
{
//If the name of the XML file is changed, make sure to update that in the url:
url: "/XMLFile.xml",
type: "GET",
dataType: "xml",
contentType:"url",
cache: false,
success: function (xml)
{
var tableContent2 = "<table border='5' cellspacing='1' cellpadding='10'>" +
"<tr>" +
"<th>URL</th>" +
"<th>Target</th>" +
"<th>Status</th>" +
"</tr>";
$(xml).find('Redirect').each(function ()
{
tableContent2 += "<tr>" +
"<td>" + $(this).attr('URL')+ "</td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + ($(this).attr('Status') == "Fail" ? Fail : CheckImage && $(this).attr('Status') == "OK" ? CheckImage : CrossImage) + "</td>" +
"</tr>";
});
tableContent2 += "</table>";
$("#UpdatePanel1").html(tableContent2)
getdata(tableContent2);
}
});
}

Here is a more complete example to show you. This is adding a anchor tag with the URL inside your table when you are creating your <td> in the loop.
let tableContent2 = "";
$("div").each(function() {
tableContent2 += "<tr>" +
"<td> <a href='" + $(this).attr('URL') + "'>" + $(this).attr('URL') + "</a></td>" +
"<td>" + $(this).attr('Target') + "</td>" +
"<td>" + $(this).attr('Status') + "</td>" +
"</tr>"
})
$("#UpdatePanel1").html(tableContent2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this div is just for this example -->
<div URL="https://example.com" Target="I am a target" Status="OK"></div>
<table>
<tbody id="UpdatePanel1">
</tbody>
</table>

Erase the page from an ajax jquery request to another

I have an ajax post request for a form submit where i manipulate the page based on the values that are returned from the controller but my problem is that whenever the form is submitted i need to erase the values from the last request.For example, i submit the form and when that happens i add some text on the page if the form is submitted a second time i need to erase those values from the last time and add on the page new content.
Here is the code:
function ajaxPost(){
// DO POST
$.ajax({
type : "POST",
url : "/search",
dataType: "json",
data : {
'marcaId': $('#marcaId').val(),
'modelId': $('#modelId').val(),
'pretDeLa': $('#pretDeLa').val(),
'pretPanaLa': $('#pretPanaLa').val(),
'anFabrDeLa' : $('#anFabrDeLa').val(),
'anFabrPanaLa' : $('#anFabrPanaLa').val(),
'orasParam' : $('#orasParam').val()
},
success : function(data) {
console.log(data);
for(var i=0; i<data.length; i++){
$('.row.autovitElements').append("<div class='col-sm-3 elementAutovit'>" + "<div class='card' style='width:20rem;'>" +
"<img class='card-img-top' src=" + JSON.stringify(data[i].img) + "alt='Card image cap'>" +
"<div class='card-body text-center'>" +
"<p class='card-text text-center' style='color: black'>" +data[i].title+ "</p>" +
"<ul class='list-group list-group-flush'>" +
"<li class='list-group-item'>" +
"<div class='row'>" +
"<div class='col-md-6'>" +
"<i class='material-icons'></i><span>"+ data[i].price +"</span>" +
"</div>" +
"<div class='col-md-6'>" +
"<i class='material-icons'></i><span>"+data[i].city+"</span>" +
"</div>" +
"</div>" +
"</li>" +
"</ul>" +
"<button href=''#' class='btn btn-danger'>Save</button>" +
"</div>" +
"</div> " +
"</div> ");
}
})
I've tried with $('.row.autovitElements').hide(); but it won't work:(

for(var i=0; i<data.length; i++){
$('.row.autovitElements').append("<div class='col-sm-3 elementAutovit'>" + ...
The elements you are appending for the results of the ajax are elementAutovit, which are children of the .row.autovitElements element. So to "reset" the results, you would remove all those elements you appended, which could be done with:
$('.row.autovitElements .elementAutovit').remove()
Which would remove all those specific elements. OR, if there is nothing else in the container that you want to keep, you could simply empty it
$('.row.autovitElements').empty()

How can I set value form a specific xml String node?

I already read the string and build an html table from it:
var ShoesXML = "<All><Shoe><Name>All Stars</Name><BrandName>Converse</BrandName><ReleaseDate>10/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe><Shoe><Name>All Star1s</Name><BrandName>Converse1</BrandName><ReleaseDate>11/2/08</ReleaseDate><Picture>pic.jpg</Picture></Shoe></All>";
$(document).ready(function() {
xmlDoc=$.parseXML( ShoesXML );
$(xmlDoc).find("Shoe").each(function(i, n) {
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";
$("table.shoetable tbody").append(html);
});
});
I tried to set a value this way but no success:
$(n).find("Name").text("NEW VALUE")

Set the .textContext before building HTML string
$(n).find("Name").text("NEW VALUE")
var html = "<tr>\n" +
"<td><span>" + $(n).find("Name").text() + "</span></td>\n" +
"<td>" + $(n).find("BrandName").text() + "</td>\n" +
"<td>" + $(n).find("ReleaseDate").text() + "</td>\n" +
"<td><img src='" + $(n).find("Picture").text() + "'></td>\n" +
"</tr>";

$.post to display table with for in

i'm trying to display a table with jsonObject response, using loop for, to begin with objetosRetorna.Propiedad_Msg is always not null, so rows in table don't show anything just columns showing a error message
i'm not using AJAX.
Here is my code.
....
$.post("ListaUser.php",
{
IdPost: DatosJson },
function(objetosRetorna){
for (var i in objetosRetorna){
if(objetosRetorna.Propiedad_Msg=='Null'){
$("#tabla tbody").html("");
var nuevaFila=
"<tr>"
+"<td><a href='NewUser.php?a=" + objetosRetorna.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar("+objetosRetorna.Prop_id+")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>"
+"<td>"+objetosRetorna[i].Prop_titulo+"</td>"
+"<td>"+objetosRetorna[i].Prop_propiedad+"</td>"
+"<td>"+objetosRetorna[i].Prop_categoria+"</td>"
+"<td>"+objetosRetorna[i].Prop_direccion+"</td>"
+"<td>"+objetosRetorna[i].Prop_colonia+"</td>"
+"<td>"+objetosRetorna[i].Prop_coordenadas+"</td>"
+"<td>"+objetosRetorna[i].Prop_superficie+"</td>"
+"<td>"+objetosRetorna[i].Prop_recamaras+"</td>"
+"<td>"+objetosRetorna[i].Prop_imagenes+"</td>"
+"<td>"+objetosRetorna[i].Prop_precio+"</td>"
+"<td>"+objetosRetorna[i].Prop_antiguedad+"</td>"
+"<td>"+objetosRetorna[i].Prop_fecha+"</td>"
+"<td>"+objetosRetorna[i].Prop_descripcion+"</td>"
+"<td>"+objetosRetorna[i].Prop_prop_id+"</td>"
+"</tr>";
$(nuevaFila).appendTo("#tabla tbody");
}
if (objetosRetorna.Propiedad_Msg!="Null") {
var nuevaFila =
"<tr>"
+"<td colspan='5'><center><font color='red'>"+objetosRetorna.Propiedad_Msg+"</font></center></td>"
+"</tr>";
$(nuevaFila).appendTo("#tabla tbody");
}
}
},"json");
Json Response
[{"Prop_id":"32",
"Prop_titulo":"Mi titulo de propiedad",
"Prop_propiedad":"Casa",
"Prop_categoria":"Renta",
"Prop_direccion":"Calle Term",
"Prop_colonia":"Progreso",
"Prop_coordenadas":"499965",
"Prop_superficie":"40m2",
"Prop_recamaras":"5",
"Prop_imagenes":"imagenes",
"Prop_precio":"4500","Prop_antiguedad":"15 a\u00f1os","Prop_fecha":"0000-00-00",
"Prop_descripcion":"Departamen","Prop_prop_id":"10",
"Propiedad_Msg":"Null"}....]
Thank you.
Hope somebody can help me
UPDATE.... TypeError: objetosRetorna.map is not a function[Saber más]index.php:62:30
function(objetosRetorna) {
var rows = objetosRetorna.map (function(objeto){
if (objeto.Propiedad_Msg == 'Null') {
return "<tr>" +
"<td><a href='NewUser.php?a=" + objeto.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar("+objeto.Prop_id+")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>"+
"<td>"+objeto.Prop_titulo+"</td>"+
"<td>"+objeto.Prop_propiedad+"</td>"+
"<td>"+objeto.Prop_categoria+"</td>"+
"<td>"+objeto.Prop_direccion+"</td>"+
"<td>"+objeto.Prop_colonia+"</td>"+
"<td>"+objeto.Prop_coordenadas+"</td>"+
"<td>"+objeto.Prop_superficie+"</td>"+
"<td>"+objeto.Prop_recamaras+"</td>"+
"<td>"+objeto.Prop_imagenes+"</td>"+
"<td>"+objeto.Prop_precio+"</td>"+
"<td>"+objeto.Prop_antiguedad+"</td>"+
"<td>"+objeto.Prop_fecha+"</td>"+
"<td>"+objeto.Prop_descripcion+"</td>"+
"<td>"+objeto.Prop_prop_id+"</td>"+
"</tr>";
}
return "<tr>" +
"<td colspan='5'><center><font color='red'>"+objeto.Propiedad_Msg+"</font></center></td>"+
"</tr>";
});
$("#tabla tbody").html(rows.join(""));
}
);

Objects, {}, in JavaScript does not have the method .map(), it's only for Arrays, [].
So in order for your code to work change data.map() to data.props.map()
And json response to something like
{"props":[
{"Prop_id":"32"},
{"Prop_titulo":"Mi titulo de propiedad"},
{"Prop_propiedad":"Casa"},
{"Prop_categoria":"Renta"},
{"Prop_direccion":"Calle Term"},
...]}
Something to read .map() on:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
PS. if you just want to iterate json and you can make your props into array you can iterate objects like this:
for (var key in objetosRetorna) {
if (objetosRetorna.hasOwnProperty(key)) {
console.log(key + " -> " + p[key]);
}
}
If you need more in-depth fix or explanation please leave a comment.

You need to refer to the entry you're looping over. Instead of
for (var i in objetosRetorna){
if(objetosRetorna.Propiedad_Msg=='Null'){
you would want
for (var i in objetosRetorna){
if(objetosRetorna[i].Propiedad_Msg=='Null'){
// --------------^^^
You make the same small mistake later with objetosRetorna.Prop_id a couple of times.
But, for-in isn't the correct way to loop through an array. You have lots of options, but here I'd probably use forEach.
Also, unrelated, but you have
if (objetosRetorna.Propiedad_Msg == 'Null') {
and then immediately after that
if (objetosRetorna.Propiedad_Msg != 'Null') {
In that situation, you can just use else to avoid the maintenance issue of having the condition repeated.
You're also removing everything from the table when adding each row, which means you'll end up with just the last row. So instead of forEach, let's use map to return an array of row strings:
So taking all that together (see *** comments):
$.post("ListaUser.php", {
IdPost: DatosJson
},
function(objetosRetorna) {
// *** Note use of `map` to get a string for each row
var rows = objetosRetorna.map(function(objecto) { // *** We receive each entry as the `objecto` argument
// Use `objeto` for the various things below
if (objeto.Propiedad_Msg == 'Null') {
return "<tr>" +
"<td><a href='NewUser.php?a=" + objeto.Prop_id + "'><button type='button' class='btn btn-default light-green lighten-1'>Editar </button></a> <button type='button' onclick='Eliminar(" + objeto.Prop_id + ")' class='red lighten-1 btn btn-danger '>Eliminar</button></td>" +
"<td>" + objetos.Prop_titulo + "</td>" +
"<td>" + objetos.Prop_propiedad + "</td>" +
"<td>" + objetos.Prop_categoria + "</td>" +
"<td>" + objetos.Prop_direccion + "</td>" +
"<td>" + objetos.Prop_colonia + "</td>" +
"<td>" + objetos.Prop_coordenadas + "</td>" +
"<td>" + objetos.Prop_superficie + "</td>" +
"<td>" + objetos.Prop_recamaras + "</td>" +
"<td>" + objetos.Prop_imagenes + "</td>" +
"<td>" + objetos.Prop_precio + "</td>" +
"<td>" + objetos.Prop_antiguedad + "</td>" +
"<td>" + objetos.Prop_fecha + "</td>" +
"<td>" + objetos.Prop_descripcion + "</td>" +
"<td>" + objetos.Prop_prop_id + "</td>" +
"</tr>";
}
// It's not null
return "<tr>" +
"<td colspan='5'><center><font color='red'>" + objeto.Propiedad_Msg + "</font></center></td>" +
"</tr>";
});
// *** Now we replace the table contents with the strings (joined into one string)
$("#tabla tbody").html(rows.join(""));
}
);