Issue On Accessing to In Script JSON object in jQuery Ajax - javascript

Can you please take a look at This Demo and let me know how to access to JSON object like credit which is declared inside the same requester script as:
var credit = [{
"name": "John Johnson",
"street": "Oslo West 16",
"phone": "222 7894562"
}, {
"name": "Davie Amber",
"street": "Alberta 52",
"phone": "555 1234567"
}, {
"name": "Marck William",
"street": "Delestre 125",
"phone": "666 7254599"
}];
$("button").click(function () {
$.ajax({
url: "credit",
success: function (result) {
$("#div1").html(result);
}
});
});
I know in real world, there is no need to do this since is doable in simple JavaScript but for doing a specific test I need to provide the test environment like this which is running by $.ajax() method.
Thanks

mockjax might be what you looking for.
Here is your example with some tweaks to get it to output to the div (doesn't work in chrome for me because of the mockjax script mime type)
Html
<div id="div1"></div>
<button>Get Data</button>
Javascript
$(document).ready(function () {
$.mockjax({
url: '/someurl',
responseText: [{
"name": "John Johnson",
"street": "Oslo West 16",
"phone": "222 7894562"
},
{
"name": "Davie Amber",
"street": "Alberta 52",
"phone": "555 1234567"
},
{
"name": "Marck William",
"street": "Delestre 125",
"phone": "666 7254599"
}]
});
$("button").click(function () {
$.ajax({
url: "/someurl",
success: function (result) {
console.log(result);
$("#div1").html(JSON.stringify(result));
}
});
});
});

Related

Razor pay route payments using php

ive been using razor pays normal checkout feature
<script type="text/javascript">
var options = {
"key": "rzp_****_*********",
"amount": 10000,
"currency": "INR",
"name": "XYZ",
"description": "Payment For Appointment at XYZ Limited",
"image": "https://XYZ.in/public/theme/images/re-logo.png",
"handler": function (response) {
var payid = response.razorpay_payment_id;
$('#transaction_id').val(payid);
$('#paymentform').submit();
},
"prefill": {
"name": "Name",
"email": "Email"
},
"notes": {
"address": "note value"
},
"theme": {
"color": "#F37254"
}
};
var rzp1 = new Razorpay(options);
document.getElementById('payonlinebutton').onclick = function (e) {
rzp1.open();
e.preventDefault();
}
</script>
But i want to use route payments now, and on razorpay's document they have only sample code for curl
Can anyone help me with php solution if there is any.
i got his document but the concept is not that clear
https://razorpay.com/docs/server-integration/php/usage/#route
Install PHP SDK https://razorpay.com/docs/server-integration/php/ and call the function as per need

How to use AjaxData with Bjornblog Store Locator

I'm trying to connect my store locator (by bjorn at https://github.com/bjorn2404/jQuery-Store-Locator-Plugin) to an object where I've pulled in location data with an XMLHttpRequest.
Can't get it to work. I created a smaller object manually with some of his sample data and couldn't get that to work either.
The documentation just says:
property - ajaxData ; default - null ; description - Allows custom data to be sent with the AJAX request. Set the setting to an object with your properties and values.
...but I must be confused on what 'setting to an object' means.
Here's what I have in my script:
let practiceData =
{
"id": "1",
"name": "Chipotle Minneapolis",
"lat": "44.947464",
"lng": "-93.320826",
"category": "Restaurant",
"address": "3040 Excelsior Blvd",
"address2": "",
"city": "Minneapolis",
"state": "MN",
"postal": "55416",
"phone": "612-922-6662",
"web": "http://www.chipotle.com",
"hours1": "Mon-Sun 11am-10pm",
"hours2": "",
"hours3": "",
"featured": "",
"features": "",
"date": "10/17/18",
"formattedaddress":"3040 Excelsior Blvd, Minneapolis MN 55416"
};
console.log(practiceData);
console.log('end practice data');
$(function() {
$('#bh-sl-map-container').storeLocator({
slideMap : true,
dataType: 'json',
/* dataLocation: '/assets/js/theme/map/locations.json',*/
ajaxData: practiceData,
fullMapStart: true,
infowindowTemplatePath: '/assets/js/theme/map/templates/infowindow-description.html',
listTemplatePath: '/assets/js/theme/map/templates/location-list-description.html'
});
});
There's no console errors and nothing shows on the page. If I connect it back to the default data file, the map shows, so I know it's a problem with the data connection.
I'm sure this is something dumb, but my head hurts, lol. Ideas?
ajaxData must be a kind of query params like this.
ajaxData: {"name" : "john", "country" : "US"} ( http://localhost/?name=john&country=US )
And dataType should be 'json' and dataLocation would be url of action.
{
...
ajaxData: {"name" : "john", "country" : "US"},
dataType: 'json',
dataLocation: '/v2/forum/',
...
}
Hope this would be helpful for you!
Regards

Converting JSON data to DOM using jQuery

I'm looking to convert each 'item'(from JSON) to appear inside a section(or div) with the image and its link appearing with the name, id, and price - how would this be done with jQuery. jQuery and JSON are below, I don't currently have any classes in the HTML other than 'placements-title' for the header and 'placements-items' for the section.
Current jQuery:
$.ajax({
type: 'GET',
url: 'pathtoJSONdata.json',
dataType: 'json',
success: function (data) {
$(".placements-title h2").append(data.placements[0].message);
$(".placements-items").append(data.placements[0].items[1].id);
}
});
Use a loop build the html as a string and append it to your desired dom element
var data = {
"placements": [{
"message": "If you like this, you might be into these",
"items": [{
"id": "029148",
"name": "Woodblock Play Suit",
"linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html",
"imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg",
"price": "46.00"
},
{
"id": "0294526806",
"name": "Smock Dress",
"linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html",
"imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg",
"price": "39.00"
},
{
"id": "0297180006",
"name": "Cami",
"linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html",
"imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg",
"price": "9.00"
},
{
"id": "0298473606",
"name": "Asymmetric Wrap Cami Dress",
"imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg",
"price": "46.00"
},
{
"id": "0297155306",
"name": "Casual Stripe Tee",
"linkURL": "http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html",
"imageURL": "http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg",
"price": "16.00"
}
]
}]
}
$.each(data.placements[0].items,function(i,v){
$('body').append('<img src="'+v.imageURL+'" height="50" width="50"><div class="placements-title"><a href="'+v.linkURL+'"><h2>'+v.name+'</h2>'+v.price+'</div>')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

get values from JSON given by randomuser.me and loop through to append in divs

hoping to use randomuser.me in a prototype i'm putting together (html, css, jquery)
I need to use its api to access profile photos.
I've got this code puling in the JSON as they show in their documentation:
$.ajax({
url: 'https://randomuser.me/api/?results=5&gender=female',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
Now I need to get the url from the picture value in the JSON and write it to the background-image css of a group of divs...I imagine by creating some kind of loop, anybody have an easy to understand way of doing this?
the JSON returned looks like this:
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "romain",
"last": "hoogmoed"
},
"location": {
"street": "1861 jan pieterszoon coenstraat",
"city": "maasdriel",
"state": "zeeland",
"postcode": 69217
},
"email": "romain.hoogmoed#example.com",
"login": {
"username": "lazyduck408",
"password": "jokers",
"salt": "UGtRFz4N",
"md5": "6d83a8c084731ee73eb5f9398b923183",
"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
"sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
},
"dob": "1983-07-14 07:29:45",
"registered": "2010-09-24 02:10:42",
"phone": "(656)-976-4980",
"cell": "(065)-247-9303",
"id": {
"name": "BSN",
"value": "04242023"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/83.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
},
"nat": "NL"
}
],
"info": {
"seed": "2da87e9305069f1d",
"results": 1,
"page": 1,
"version": "1.1"
}
}
If I've got right you need something like this:
$( ".myDivClass" ).each(function( index ) {
$( this ).attr("background-image", results[index].picture.medium));
});
Or if you have in results only one element of array so to do: ...results[0].picture.medium...

calling data from nested .json using ajax

I'm new one to work with JSON and getting stuck that how to call JSON data from nested .json file. please check the code below ...
JSON FORMAT
{
"hotels": {
"category": [{
"name": "Exotic and Luxurious",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "In the Tourist Hub",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "Close to the Beach and Market",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
},{
"name": "Private and Peaceful",
"products": [{
"name": "Sofitel L'Imperial Resort and Spa",
"budget": "Luxery",
"location": "flic en flac",
"price": "71500"
}, {
"name": "Shanti Maurice a Nira Resort",
"budget": "Luxery",
"location": "Chemin Grenier",
"price": "88500"
}]
}]
}
}
AJAX CODE
jQuery(document).ready(function() {
jQuery.ajax({
url: 'hotels.json',
type: 'GET',
dataType: 'json',
success : function(data){
/*jQuery(data).each(function(index, value){
console.log(value.hotels.name);
})*/
//console.log(data.hotels.category[1].name);
//alert(JSON.stringify(data));
var i = 0;
jQuery(data.hotels.category).each(function(){
jQuery('.theme ul').append('<li data-role="'+data.hotels.category[i].name+'">'+data.hotels.category[i].name+'</li>');
i++;
})
jQuery(data.hotels.category).each(function(){
jQuery('.budget ul').append('<li data-role="'+data.hotels.category[i].name.products[0].name+'">'+data.hotels.category[i].name.products[0].name+'</li>');
i++;
})
}
})
.done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
});
HTML
<div class="theme">
<p>Hotel experience theme</p>
<ul>
</ul>
</div>
<div class="budget">
<p>Budget</p>
<ul>
</ul>
</div>
I want to call name data from products which is defined in category in <li> of budget div
Change:
jQuery(data.hotels.category).each(function() {...});
to:
jQuery.each(data.hotels.category, function() {...});
The first form is for looping over DOM elements in a selection, the second form is for looping over Javascript arrays and objects.
And within the function, you can use this to refer to the element, you don't need to use data.hotels.category[i].
But if you continue to use data.hotels.category[i], you need to set i back to 0 before the second loop. Or you could just do everything in one loop. And .each() passes the array index to the function, so you don't need your own variable.
Finally, products is not a sub-property of the name property.
The final result of fixing and simplifying this should be:
jQuery.each(data.hotels.category, function(){
jQuery('.theme ul').append('<li data-role="'+this.name+'">'+this.name+'</li>');
jQuery('.budget ul').append('<li data-role="'+this.products[0].name+'">'+this.products[0].name+'</li>');
});
The products belong to category directly so you don't have to pass by name to get it, you should go directly to it, so try to replace :
data.hotels.category[i].name.products[0].name
BY :
data.hotels.category[i].products[0].name
Hope this helps.

Categories