Populate HTML with JSON array in Javascript - javascript

This question has been asked a couple of time here, but I haven't seen any of the responses work for me.
I have this piece of code built with cakePHP which successfully returns the data in JSON format, but I haven't been able to insert this JSON data into HTML div using Javascript.
$('.book-click').click(function (e) {
e.preventDefault();
var getHotel = $(this).attr('hotel-id');
$.ajax({
type: "POST",
url: "<?php echo $this->Html->URL(array('action' => 'postBook')); ?>",
data: {
hotel: getHotel
},
cache: false,
dataTye: "json",
success: function (JSONObject) {
var myData = "";
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
myData += JSONObject[key];
}
}
/*console.log(myData);*/
alert(myData[key]["hotelname"]); //Giving undifined in alert
}
});
});
And this is the JSON data I get when I log the data on browser console:
[
{
"id": "11",
"hotelname": "Sheraton hotel",
"hoteladdress": "Abule Ikeja",
"state": "Lagos State",
"lga": "Ikeja",
"hotelphone": "65645545454",
"hotelwebsite": "",
"adminphone": "6565656565",
"adminemail": "mail#hotel.com",
"hotelemail": "",
"facilities": ",,",
"roomscategory": "Diplomatic",
"standardrate": "150000",
"leanrate": "",
"aboutHotel": "",
"requestStatus": "0",
"createdOn": "1424360902",
"updatedOn": "1424360902"
}
]
How do I successfully, get this JSON data into HTML. Something like this:
$('#myDiv').html(myData[key]["hotelname"]);
I tried this, but it's just giving me Undefined.
Any help is appreciated.

Use $.each() to iterate:
success: function (JSONObject) {
$.each(JSONObject, function(k,item){
$('#myDiv').html(item.hotelname);
});
}
var json = [
{
"id": "11",
"hotelname": "Sheraton hotel",
"hoteladdress": "Abule Ikeja",
"state": "Lagos State",
"lga": "Ikeja",
"hotelphone": "65645545454",
"hotelwebsite": "",
"adminphone": "6565656565",
"adminemail": "mail#hotel.com",
"hotelemail": "",
"facilities": ",,",
"roomscategory": "Diplomatic",
"standardrate": "150000",
"leanrate": "",
"aboutHotel": "",
"requestStatus": "0",
"createdOn": "1424360902",
"updatedOn": "1424360902"
}
]
$.each(json, function(i, item){
$('body').append(item.hotelname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
As per your error, it seems that you either you don't have a valid json or that is a json string. So before loopin you have to parse it:
success: function (JSONObject) {
var data = $.parseJSON(JSONObject); // parse it
$.each(data, function(k,item){
$('#myDiv').html(item.hotelname);
});
}

var myData = "";
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
myData += JSONObject[key];
}
}
myData here is simply just a string. Hence the call myData[key]["hotelname"] will return undefined, because you're trying to access something that does not exist.
Why not just use the result as-is from the Ajax call?

Related

How to Update DataTable with JSON data in Javascript?

I have a table TableElements and a Javascript valiable jsonData.
I want to reload TableElements' dataTable using the reload() method but without success.
The goal is to add a row to the table, inserting it into the database. This is the code I used so far
$.ajax({
url: 'AddRow.php',
type: 'POST',
data: {
CatProg: catProg,
CatUser: catUser,
CatPass: catPass,
CatInUso: catInUso,
CatDesc: catDesc,
CatUltimo: catUltimo,
CatDat: catDat
},
dataType: "text",
success: function(result){
// draw table again
var table = document.getElementById('TableElements');
table.remove();
var tableContainer = document.getElementById('tableContainer');
tableContainer.innerHTML = result;
jsonData = GetJsonFromTable(); // it works
$('#TableElements').DataTable({ ajax: 'data.json' }).reload(); //?? how to put 'jsonData' here?
},
error: function(){
alert("Request did not succeed. Reload and try again.");
}
});
}
This is what jsonData is holding:
[
{
"Aggiungi": "Modifica Elimina",
"CatProg": "1",
"CatUser": "user1",
"CatPass": "user1pass1",
"CatInUso": "Y",
"CatDesc": "desc",
"CatUltimo": "1",
"CatDat": "12-12-2001"
},
{
"Aggiungi": "Modifica Elimina",
"CatProg": "2",
"CatUser": "admin",
"CatPass": "admin",
"CatInUso": "N",
"CatDesc": "aaa",
"CatUltimo": "1",
"CatDat": "01-01-1999"
}
]

How can I dynamically update the JSON-LD script with Ajax?

I have JSON-LD as shown, where ratingValue and ratingCount are coming from backend, but I want do it from UI through Ajax call and update it in the aggregateRating.
But when opened page source it is showing data coming from the backend, but when I do console.log() it is showing the value expected but it is not updated in page source.
Is there any way possibly do it from the UI side?
<script type="application/ld+json"> {
"#context": "http://schema.org/",
"#type": "Product",
"name": "Phone",
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "80"
},
"offers": {
"#type": "AggregateOffer",
"lowPrice": "5",
"highPrice": "10",
"priceCurrency": "USD",
"availability": "http://schema.org/InStock"
}
}
</script>
(function () {
var id = $ {
prdId
};
var response = "";
$.ajax({
url: url;
dataType: "jsonp",
data: {
pid: id,
_method: "GET",
t: new Date().getTime()
},
timeout: 20000,
xhrFields: {
withCredentials: true
},
type: "get",
success: function (json) {
if (json.success == true) {
response = json.data;
//call api
structureData(response);
} else {
response = "error";
}
}
});
function structureData(resp) {
var json = document.querySelector('script[type="application/ld+json"]').textContent;
json = JSON.parse(json);
json["aggregateRating"] = {
"#type": "AggregateRating",
"ratingValue": resp.averageScore,
"reviewCount": resp.averageScore
}
var jso = JSON.stringify(json);
document.querySelector('script[type="application/ld+json"]').textContent = jso;
}
}
You can definitely update JSON-LD dynamically, this is a more crude example - but you can run the code snippet and see it working. I found the code through this SO question about roughly the same topic but modified it to match your example better:
let jsonLdScript = document.querySelector('script[type="application/ld+json"]');
let jsonld = JSON.parse(jsonLdScript.innerText);
document.getElementById('orig-result').textContent = jsonLdScript.innerText;
jsonld.aggregateRating.ratingValue = "5";
jsonld.aggregateRating.ratingCount = "95";
let newJson = JSON.stringify(jsonld);
jsonLdScript.innerHTML = newJson;
document.getElementById('result').textContent = jsonLdScript.innerText;
<html>
<head>
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Product",
"name": "Phone",
"aggregateRating": {
"#type": "AggregateRating",
"ratingValue": "4.5",
"ratingCount": "80"
},
"offers": {
"#type": "AggregateOffer",
"lowPrice": "5",
"highPrice": "10",
"priceCurrency": "USD",
"availability": "http://schema.org/InStock"
}
}
</script>
</head>
<body>
<p>Original Output JSON-LD: <br /><strong id="orig-result"></strong></p>
<p>New Output JSON-LD: <br /><strong id="result"></strong></p>
</body>
</html>
How are you testing? A few things to keep in mind:
Obviously the raw page DOM won't be modified
You should see the changes in dev tools
If you're using Googles Structured Data Tool, and the original JSON is parsed before your function updates it, I'd wager Google won't catch the change.
If you're using querySelector, might want to confirm that the JSON-LD you intend to modify is the first instance of JSON-LD on the page.

How can i put json result into an input value using jQuery?

I am trying to put json result into a input the value.
I have this code:
$.ajax({
type:"POST",
url: '{% url "url_searchTour"%}',
data: data1,
success: function(jsonAjaxResult){
console.log(JSON.stringify(jsonAjaxResult));
$('#txt_nombre').val(jsonAjaxResult);
},
error: function(data){
alert("Got an error, Pleas conctact the Administrator");
}
});
The view returns single json object.
View:
dataSer1 = serializers.serialize("json",dataT1)
dataSer2 = serializers.serialize("json",dataT2)
data0 = json.dumps({'dataEsp':dataSer1,'dataEng':dataSer2})
return HttpResponse(data0, content_type='application/json')
How can I put the information returned into a inputy value. For example like this:
$('#txt_nombre').val(jsonAjaxResult['dataEsp.name']); //from obj1
$('#txt2_nombre').val(jsonAjaxResult['dataEng.name']); //from obj2
What i have so far is this:
console.log(jsonAjaxResult['dataEsp']);
It retuns the next code:
[{
"fields":
{
"Monday": true,
"restrictions": "No kids",
"name": "Yate Mar",
},
"model": "appMain.touresp",
"pk": 1
}]
JSON.stringify() it's the way to do it, check how it's working with your data.
var jsonData = [{
"fields":
{
"Monday": true,
"restrictions": "No kids",
"name": "Yate Mar",
},
"model": "appMain.touresp",
"pk": 1
}]
console.log(jsonData)
var txt = document.getElementById("myTxt");
txt.innerHTML = JSON.stringify(jsonData)
<textarea id="myTxt"></textarea>

Return JSON results as JS array with AJAX?

Apologies in advance - I am new to this and so other answers have not been able to help me.
I have used AJAX to send data to a PHP script (part of a 3rd party API). The PHP script returns the results as JSON, but I have no idea how to format these on my HTML page.
Ultimately, I would like to save the JSON results as an array and then use JS/Jquery to format them on the page.
I am not sure how to modify the PHP and AJAX scripts to achieve this. Can anyone point me in the right direction?
My AJAX:
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {toPostcode: toPostcodeValue, parcelLengthInCMs: parcelLengthInCMsValue, parcelHeighthInCMs: parcelHeighthInCMsValue, parcelWidthInCMs: parcelWidthInCMsValue, parcelWeightInKGs: parcelWeightInKGsValue},
success: function(data) {
<!--NOT SURE WHAT TO PUT HERE-->
}
})
PHP (after the calculator does its thing - not sure if it needs to be changed):
$serviceTypesJSON = json_decode($rawBody);
echo json_encode($serviceTypesJSON);
The expected JSON results should look like:
{
"services": {
"service" : [
{
"code": "AUS_PARCEL_REGULAR",
"name": "Parcel Post (your own packaging)",
"speed": 2,
"price": 6.95,
"max_extra_cover": 5000,
"extra_cover_rule": "100,1.5,1.5",
"icon_url": "http://test-static.npe.auspost.com.au/api/images/pac/regular_post_box.png",
"description": "Based on the size and weight you've entered",
"details": "Check our ",
"delivery_time": "Delivered in up to 3 business days",
"ui_display_order": 1,
"options": {
"option": [
{
"code": "AUS_SERVICE_OPTION_STANDARD",
"name": "Standard Service",
"price": "0.00",
"price_type": "static",
"option_type": "optional",
"ui_display_order": 1
},
{
"code": "AUS_SERVICE_OPTION_SIGNATURE_ON_DELIVERY",
"name": "Signature on Delivery",
"price": 2.95,
"price_type": "static",
"option_type": "optional",
"tooltip": "Signature on Delivery provides you with the peace of mind that your item has been delivered and signed for.",
"ui_display_order": 2,
"suboptions": {
"option": {
"code": "AUS_SERVICE_OPTION_EXTRA_COVER",
"name": "Extra Cover",
"option_type": "optional",
"price_type": "dynamic",
"tooltip": "Extra Cover provides cover for loss, damage or theft of your item and will fully compensate you to the value specified for your item.",
"ui_display_order": 1
}
}
}
]
}
},
You can do two things, if the return data is JSON use dataType: "json" in the AJAX call.
Edit 1
If you are using dataType: "json". Which is more preferred if you are sure the data return is JSON string. data variable in the success will directly give you the JSON object. I think you can access it like data['services'].
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services;
}
Or you can just get the data then use jQuery.parseJSON() to parse the data string into JSON object.
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {
toPostcode: toPostcodeValue,
parcelLengthInCMs: parcelLengthInCMsValue,
parcelHeighthInCMs: parcelHeighthInCMsValue,
parcelWidthInCMs: parcelWidthInCMsValue,
parcelWeightInKGs: parcelWeightInKGsValue
},
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services; //or jsonObj["services"]
}
})
Your success function will never be called if you are using
echo json_encode(); in your php script.
You should add dataType:'json' after type:'POST' and then your success function will get called and will get the result returned by server in data

parse a result from AJAX request

I have this ajax request:
var rootURL = "http://localhost/myapp/api/api.php";
$.ajax({
type: 'GET',
url: rootURL + '/favourites',
dataType: "json",
success: function(list) {
},
error: function(list) {
}
});
and the api.php makes a query to DB and the encoded result
echo '{"result": ' . json_encode($result) . '}';
is like this:
{
"result": [
{
"ID": "1",
"username": "username1",
"name": "name1",
"year": "year1"
},
{
"ID": "2",
"username": "username2",
"name": "name2",
"year": "year2"
}
]
}
Now how can I get and print the two rows of the JSON result list in success callback in Javascript?
I tried this:
var decoded = JSON.parse( lista );
but I receive an error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Thanks
You dont't need to parse, just you need to iterate the array inside the result.
do like this:
success: function(list) {
$.each(list.result,function(index,item){
console.log(item);
});
}
FIDDLE DEMO
Don't call JSON.parse. jQuery does that for you when you say dataType: "json". list is an object. So just access list.result, which contains the result array.
Also, your PHP shouldn't build the JSON by hand like that. It should do:
echo json_encode(array('result' => $result));

Categories