How to use Kimono API - json

Goal: Parse JSON API data with jquery so I can display the information on my static (no backend) website in a styled list.
I have created an API using Kimono, and now need to display this information. Any help on just where to get started would be great.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
Example JSON Data:
{
"name": "HN",
"count": 30,
"frequency": "daily",
"version": 1,
"newdata": true,
"lastrunstatus": "success",
"lastsuccess": "Wed Mar 19 2014 23:23:40 GMT+0000 (UTC)",
"nextrun": "Thu Mar 20 2014 23:23:40 GMT+0000 (UTC)",
"results": {
"collection1": [
{
"property1": {
"href": "http://blog.samaltman.com/new-rfs-breakthrough-technologies",
"text": "New RFS – Breakthrough Technologies"
},
"source": "(samaltman.com)"
},
{
"property1": {
"href": "https://www.unrealengine.com/blog/welcome-to-unreal-engine-4",
"text": "Welcome to Unreal Engine 4"
},
"source": "(unrealengine.com)"
},
{
"property1": {
"href": "https://www.crypto101.io/",
"text": "Crypto 101"
},
"source": "(crypto101.io)"
},
{
"property1": {
"href": "http://sivers.org/full",
"text": "What if you didn't need money or attention?"
},
"source": "(sivers.org)"
}
Thank you for any help.

You do not need parse the JSON, when you specify dataType:'jsonp' property in $.ajax(), jQuery will automatically parse the response from the server and pass the parsed JSON object to your success callback kimonoCallback(data), you need parse the JSON if you remove the dataType:"jsonp" from your $.ajax() call only (with JSON.parse(), jQuery.parseJSON()... etc).
<script>
function kimonoCallback(data) {
console.log(data);
$.each(data.results, function( index, collection ) {
$.each(collection, function( index, object ) {
console.log(object.source);
console.log(object.property1.text);
//console.log(object.anotherproperty);
//.....
});
});
}
$.ajax({
"url":"http://www.kimonolabs.com/api/42ts6px8?apikey=363e7e1d3fffb45d424ad535ebdc233d&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>

Related

how do i integrate authorize.net into my wix page?

I am using authorize.net's sandbox API to test their gateway in my wix (corvid/code) environment. Funny thing is that when i send JSON to the sandbox API i get a valid JSON response approving the (fake) transaction. however when i set it up thru wix i get data errors in my console. I have built on existing files that i have been able to run basic API responses, and more advanced auths with token responses. so the code works, just not with authorize.net. given my level of expertise, i think it might be something im doing wrong. i've done my due diligence, and there are no questions on this topic. here is my code:
///front end, from the corvid page's code
import {buyIt} from 'backend/authorizeNet';
export function button1_click(event) {
buyIt();
}
pretty basic, just calling code from my backend onClick. the filepath is correct. here is the module on the backend:
//// backend/authorizeNet.jsw
import {fetch} from 'wix-fetch';
export function buyIt() {
let data = {
"createTransactionRequest": {
"merchantAuthentication": {
"name": "***************",
"transactionKey": "****************"
},
"refId": "123456",
"transactionRequest": {
"transactionType": "authCaptureTransaction",
"amount": "5",
"payment": {
"creditCard": {
"cardNumber": "5424000000000015",
"expirationDate": "2020-12",
"cardCode": "999"
}
},
"lineItems": {
"lineItem": {
"itemId": "1",
"name": "vase",
"description": "Cannes logo",
"quantity": "18",
"unitPrice": "45.00"
}
},
"tax": {
"amount": "4.26",
"name": "level2 tax name",
"description": "level2 tax"
},
"duty": {
"amount": "8.55",
"name": "duty name",
"description": "duty description"
},
"shipping": {
"amount": "4.26",
"name": "level2 tax name",
"description": "level2 tax"
},
"poNumber": "456654",
"customer": {
"id": "99999456654"
},
"billTo": {
"firstName": "Ellen",
"lastName": "Johnson",
"company": "Souveniropolis",
"address": "14 Main Street",
"city": "Pecan Springs",
"state": "TX",
"zip": "44628",
"country": "USA"
},
"shipTo": {
"firstName": "China",
"lastName": "Bayles",
"company": "Thyme for Tea",
"address": "12 Main Street",
"city": "Pecan Springs",
"state": "TX",
"zip": "44628",
"country": "USA"
},
"customerIP": "192.168.1.1",
"transactionSettings": {
"setting": {
"settingName": "testRequest",
"settingValue": "false"
}
},
"userFields": {
"userField": [
{
"name": "MerchantDefinedFieldName1",
"value": "MerchantDefinedFieldValue1"
},
{
"name": "favorite_color",
"value": "blue"
}
]
}
}
}
}
return fetch("https://test.authorize.net/xml/v1/request.api", {
"method": "post",
"headers": {"Content-Type": "application/json"},
"body": data
})
.then(response => {console.log(response.json())});///if response.text is used, it gives details
}
note at the end of the backend code, calling response.json give me a json error, due to the return code contains HTML saying that i've requested invalid data. if i change it to response.text i get this in my console:
//console response with response.text
{...}
isFulfilled:
true
isRejected:
false
fulfillmentValue:
"<HTML><HEAD>\n<TITLE>Bad Request</TITLE>\n</HEAD><BODY>\n<H1>Bad Request</H1>\nYour browser sent a request that this server could not understand.<P>\nReference #7.1d60fea5.1557756725.387c74\n</BODY>\n</HTML>\n"
how do i get a good response from the API? like ive done with the same code in postman?
thanks in advance
return fetch(url, {
method: "post",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(data)
})
.then(response => console.log(response.text())
)
this got me the result i was looking for
stringify() converted my object to a JSON string. i still cannot get it to read the incoming JSON, might have to use parse...but if i read as text i get the info i want and my API is showing a successful transaction.

Meteor JSON Method and Call in template

I am trying to call a Meteor method with a parsed json doc to use in my template. None of my calls work and I then need advise on how to display (maybe I should save this part for another post - but any suggestions would be helpful) in template with helpers. I am new to meteor and javascript.
Json doc
{
"sports-content": {
"sport-event": [{
"event-metadata": {
"league": "NCAA Basketball",
"event-type": "0",
"league-details": "NCAAB",
"event-date-time": "12/18/2015 07:00 PM",
"eventNum": "3000460",
"status": "",
"off-the-board": "False"
},
"team": [{
"team-metadata": {
"alignment": "Home",
"nss": "526",
"openNum": "526",
"name": {
"full": "Clemson"
}
},
"wagering-stats": {
"wagering-straight-spread": {
"bookmaker-name": "BetOnline",
"active": "true",
"line": "1.5",
"money": "-110",
"context": "current"
}
},
"team-stats": {
"score": "0"
}
}, {
"team-metadata": {
"alignment": "Away",
"openNum": "525",
"nss": "525",
"name": {
"full": "South Carolina"
}
},
"wagering-stats": {
"wagering-straight-spread": {
"bookmaker-name": "BetOnline",
"active": "true",
"line": "-1.5",
"money": "-110",
"context": "current"
}
},
"team-stats": {
"score": "0"
}
}]
}],
"sports-meta-data": {
"doc-time": "42353.5979256944"
}
}
}
server.js
Meteor.startup(function () {
Meteor.methods({
sportsFeed:function(){
//console.log(JSON.parse(Assets.getText('ncaab.json')));
var feed = {};
var feed = JSON.parse(Assets.getText("ncaab.json"));
return feed;
}
});
});
Template.html
<template name="tabsOne">
<p>{{display}}</p>
</template>
Template.js
Template.tabsOne.helpers({
display: function(){
Meteor.call('sportsFeed', function(error, result){
if(error){
console.log("error", error);
}
if(result){
console.log('success');
}
});
}
});
If the json file is from your local, thinking about save it into Mongo and then publish it to the client
First, you need to create a collection called SportContent and on the server side, just make
SportContent.insert(JSON.parse(Assets.getText("ncaab.json")));
and then, do the normal publication to the client
If the json file is not on your local side (as in, you get it from rest call service), use wrapAsync to wrap the Http.call, then trigger the rest call and return the result. On your client side, you will get the response
Example on the server side to connect to the rest api
Meteor.methods({
'updateFeed': function () {
var httpCall = Meteor.wrapAsync(HTTP.call);
var result = httpCall('GET', url, {headers: headers});
....
}
});

AngularJS display JSON data in table

I am using AngularJS with RESTAPI, I am able to get the customers data sent from server in a JSON format. My Angular code snippet as below:
app.factory("services", ['$http', function($http) {
var serviceBase = '/api/album';
var obj = {};
obj.getCustomers = function(){
return $http.get(serviceBase);
};
return obj;
}]);
app.controller('listCtrl', function ($scope, services) {
services.getCustomers().then(function(data){
alert(JSON.stringify(data.data));
$scope.customers = data.data;
});
});
Here is my JSON data:
{
"data": [
{
"id": "1",
"artist": "Gotye75",
"title": "Making Mirrors7"
},
{
"id": "100",
"artist": "ytttt5",
"title": "1231"
},
{
"id": "101",
"artist": "65",
"title": "565444555"
},
{
"id": "102",
"artist": "6",
"title": "6"
},
{
"id": "103",
"artist": "y",
"title": "yy"
},
{
"id": "104",
"artist": "ty",
"title": "yt"
},
{
"id": "109",
"artist": "ytrer",
"title": "yt"
}
]
}
I am able to display the JSON data in table if my JSON does not contain the "data" hear. However if my jSON data comes with "data" header, it is unable to display. I am asking, what are the solution in Angular to parse the JSON object.
For example if it is in BackboneJS, i can simply do
parse: function (response) {
//alert(JSON.stringify(response.data));
return response.data;
}
How can i do it in Angular?
$http resolves its promises with a response object. The data is accessed via the response object's data property. So to get to the array, you'd have to use
$scope.customers = data.data.data;
$http's promise is enhanced with a .success() convenience method which unwraps the response object...
services.getCustomers().success(function(data){
alert(JSON.stringify(data.data));
$scope.customers = data.data;
});
I solved it by
app.controller('listCtrl', function ($scope, services) {
services.getCustomers().then(function(data){
//notice that i added the third data
$scope.customers = data.data.data;
});
});

Issues Parsing a Facebook Graph API JSON Message using JQuery $.each Function

I have been trying to access/parse the “message” object found in the JSON results hereafter, issued by the Facebook Graph API, using the Javascript JQuery $.each(function()) Function but without success. I am able to access the “name” object, but not the objects found in the statuses=>data array. I have tried a multitude of syntaxes, but without success. I was wondering if one could provide a syntactical example using the Javascript JQuery $.each(function()) Function of how I could access the “message” object. As you will notice, the “message” objects are found under the following structure: results=>friends=>data array=>statuses=>data array=>message.
{
"id": "idValue",
"friends": {
"data": [
{
"name": "NameValue",
"id": "idValue",
"statuses": {
"data": [
{
"message": "Msg1",
"updated_time": "Date",
},
{
"message": "Msg2",
"updated_time": "Date",
},
],
}
},
{
"name": "NameValue",
"id": "idValue",
"statuses": {
"data": [
{
"message": "Msg1",
"updated_time": "Date",
},
{
"message": "Msg2",
"updated_time": "Date",
},
],
}
}
],
}
}
Assuming that that block is stored in response:
console.log(response);
$.each(response.friends.data, function(i, friend){
console.log(friend);
$.each(friend.statuses, function(i, status){
console.log(status);
});
});
Un-tested, but it should work. It helps to console.log along the way to be sure what you're looking at. See the log in the inspector in Chrome or Firefox

Extract Json data on client side

I have following JSON data coming to client. I need to extract the data somehow so I can loop through it to get all name & count values.
{
"summarydata": {
"rows": [
{
"name": "Cisco0 Webinar US",
"count": "1"
},
{
"name": "Resource Nation CC",
"count": "1"
},
{
"name": "test",
"count": "10"
},
{
"name": "test",
"count": "2"
},
{
"name": "Vendor Seek",
"count": "1"
}
]
}
}
$.extend($.jgrid.defaults,
{ datatype: 'jsonstring' },
{ ajaxGridOptions: { contentType: "application/json",
success: function (data, textStatus) {
if (textStatus == "success") {
var thegrid = $("#BuyBackGrid")[0];
thegrid.addJSONData(data.data);
var summaryresult = $.parseJSON(data.summarydata.rows[0]);
alert(summaryresult );// this gives me null
alert(data.summarydata.rows[0].name); //this gives me first name element which is "Cisco0 Webinar US" in my case.
// alert($.parseJSON(data).summarydata.rows[0].name);
}
} //end of success
}//end of ajaxGridOptions
});
Leveraging jQuery...
The $.getJSON() function parses a local JSON file and returns it as an object.
$.getJSON("myJSON.js", function(json){
alert(json.summarydata.rows[0].name);
});
You could also just do this, using the JSON library for javascript (the object is also standard in most recent browsers).
alert(JSON.parse(myJSONString).summarydata.rows[0].name);