I know this question gets asked in different ways but I am struggling to wrap my head around how to handle the data returned from an API URI and hoping to get a clearer idea of how to properly use it.
I am practicing APIs and decided to make a simple weather app that gets data from openweathermap.com
An example URI is http://api.openweathermap.org/data/2.5/weather?q=Los+Angeles&APPID=myApiKey
I concat this data using an input on my page that fills in whatever city or zip you type in and printing the full path as a link works just fine. But when I try to parse the data from this URI I get an error
Uncaught SyntaxError: Unexpected token h in JSON at position 0
at JSON.parse (<anonymous>)
at getWeather (index.js:25)
at HTMLButtonElement.onclick
I am trying to break down the data inside of this API data so I can appropriately display things like temp, wind, humidity etc.
This is the code that I wrote to test if I am properly getting the data.
// Set API variables
const api = "http://api.openweathermap.org/data/2.5/weather?q=";
const apiKey ="myAPIKey";
// Set City and Units
let unitType = "imperial";
let units = "&units=" + unitType;
function setup() {
var button = document.getElementById('submit');
button.click = getWeather();
}
function getWeather() {
let city = document.getElementById('city').value;
let fullPath = api + city + "&APPID=" + apiKey + units;
console.log(city);
//document.getElementById('weatherData').innerHTML='' + city + '';
let data = fullPath;
let obj = JSON.parse(data);
document.getElementById('weatherData').innerHTML = obj.main.temp;
}
the getWeather() function is called when you click the submit button on the page which looks like:
<!doctype html>
<html>
<head></head>
<body>
<input type="text" id="city" placeholder="Enter a city" />
<button onclick="getWeather()" id="submit">Submit</button>
<div id="weatherData" style="background: #ccc; padding: 20px; margin-top: 25px;">
</div>
<script src="index.js"></script>
</body>
</html>
What am I doing wrong? I have never worked with APIs before so please forgive me if I look very ignorant here. When I had the program just print a concatenated URL (linking to the URI itself) on the screen it worked, but now that I'm trying to actually extract data I get the error from above.
Edit here's an example of the API data returned:
{
"coord": {
"lon": -96.81,
"lat": 32.78
},
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"base": "stations",
"main": {
"temp": 295.15,
"pressure": 1016,
"humidity": 78,
"temp_min": 294.15,
"temp_max": 296.15
},
"visibility": 20921,
"wind": {
"speed": 4.1,
"deg": 180
},
"clouds": {
"all": 100
},
"dt": 1491835980,
"sys": {
"type": 1,
"id": 2596,
"message": 0.0099,
"country": "US",
"sunrise": 1491825755,
"sunset": 1491872065
},
"id": 4684888,
"name": "Dallas",
"cod": 200
}
let fullPath = api + city + "&APPID=" + apiKey + units; // fullPath is a string representing an URL
let data = fullPath; // data is a string representing an URL
let obj = JSON.parse(data); // You try to parse an URL, not JSON
You try to parse an URL, so it doesn't work. Make a XHR request on this URL to get your JSON data.
Edit:
To request a remote JSON file, use the fetch API (include a polyfill if your browser doesn't implement fetch):
fetch('/data.json')
.then(function(response) {
return response.json();
}).then(function(json) {
console.log('parsed json', json);
}).catch(function(ex) {
console.log('parsing failed', ex);
})
Related
I have been working on the backend of my app. At this point, it can access all data in a data base, and output it. I'm trying to implement some queries, so that the user can filter out the content that is returned. My DAL/DAO, looks like this
let mflix //Creates a variable used to store a ref to our DB
class MflixDAO {
static async injectDB(conn){
if(mflix){
return
}
try{
mflix = await conn.db(process.env.JD_NS).collection("movies")
}catch(e){
console.error('Unable to establish a collection handle in mflixDAO: ' + e)
}
}
// Creates a query to fetch data from the collection/table in the DB
static async getMovies({
mflix.controller
filters = null,
page = 0,
moviesPerPage = 20,
} = {}) {
let query
if (filters){
// Code
if("year" in filters){
query = {"year": {$eq: filters["year"]}}
}
// Code
}
// Cursor represents the returned data
let cursor
try{
cursor = await mflix.find(query)
}catch(e){
console.error('Unable to issue find command ' + e)
return {moviesList: [], totalNumMovies: 0}
}
const displayCursor = cursor.limit(moviesPerPage).skip(moviesPerPage * page)
try{
const moviesList = await displayCursor.toArray() // Puts data in an array
const totalNumMovies = await mflix.countDocuments(query) // Gets total number of documents
return { moviesList, totalNumMovies}
} catch(e){
console.error('Unable to convert cursor to array or problem counting documents ' + e)
return{moviesList: [], totalNumMovies: 0}
}
}
}
export default MflixDAO
Just so you know, I am using a sample database from MongoDB Atlas. I am using Postman to test HTTP requests. All the data follows JSON format
Anyway, when I execute a basic GET request. The program runs without any problems. All the data outputs as expected. However, if I execute something along the lines of
GET http://localhost:5000/api/v1/mflix?year=1903
Then moviesList returns an empty array [], but no error message.
After debugging, I suspect the problem lies either at cursor = await mflix.find(query) or displayCursor = cursor.limit(moviesPerPage).skip(moviesPerPage * page), but the callstacks for those methods is so complex for me, I don't know what to even look for.
Any suggestions?
Edit: Here is an example of the document I am trying to access:
{
"_id": "573a1390f29313caabcd42e8",
"plot": "A group of bandits stage a brazen train hold-up, only to find a determined posse hot on their heels.",
"genres": [
"Short",
"Western"
],
"runtime": 11,
"cast": [
"A.C. Abadie",
"Gilbert M. 'Broncho Billy' Anderson",
"George Barnes",
"Justus D. Barnes"
],
"poster": "https://m.media-amazon.com/images/M/MV5BMTU3NjE5NzYtYTYyNS00MDVmLWIwYjgtMmYwYWIxZDYyNzU2XkEyXkFqcGdeQXVyNzQzNzQxNzI#._V1_SY1000_SX677_AL_.jpg",
"title": "The Great Train Robbery",
"fullplot": "Among the earliest existing films in American cinema - notable as the first film that presented a narrative story to tell - it depicts a group of cowboy outlaws who hold up a train and rob the passengers. They are then pursued by a Sheriff's posse. Several scenes have color included - all hand tinted.",
"languages": [
"English"
],
"released": "1903-12-01T00:00:00.000Z",
"directors": [
"Edwin S. Porter"
],
"rated": "TV-G",
"awards": {
"wins": 1,
"nominations": 0,
"text": "1 win."
},
"lastupdated": "2015-08-13 00:27:59.177000000",
"year": 1903,
"imdb": {
"rating": 7.4,
"votes": 9847,
"id": 439
},
"countries": [
"USA"
],
"type": "movie",
"tomatoes": {
"viewer": {
"rating": 3.7,
"numReviews": 2559,
"meter": 75
},
"fresh": 6,
"critic": {
"rating": 7.6,
"numReviews": 6,
"meter": 100
},
"rotten": 0,
"lastUpdated": "2015-08-08T19:16:10.000Z"
},
"num_mflix_comments": 0
}
EDIT: It seems to be a datatype problem. When I request a data with a string/varchar type, the program returns values that contain that value. Example:
Input:
GET localhost:5000/api/v1/mflix?rated=TV-G
Output:
{
"_id": "XXXXXXXXXX"
// Data
"rated" = "TV-G"
// Data
}
EDIT: The problem has nothing to do with anything I've posted up to this point it seems. The problem is in this piece of code:
let filters = {}
if(req.query.year){
filters.year = req.query.year // This line needs to be changed
}
const {moviesList, totalNumMovies} = await MflixDAO.getMovies({
filters,
page,
moviesPerPage,
})
I will explain in the answer below
Ok so the problem, as it turns out, is that when I make an HTTP request, the requested value is passed as a string. So in
GET http://localhost:5000/api/v1/mflix?year=1903
the value of year is registered by the program as a string. In other words, the DAO ends up looking for "1903" instead of 1903. Naturally, year = "1903" does not exist. To fix this, the line filters.year = req.query.year must be changed to filters.year = parseInt(req.query.year).
I need to access the nav for a specific date from the below JSON. eg : data[date="20-04-2022"].nav
How do I do it in Google Apps Script?
The standard JSON notation is not working.
{
"meta":{
"fund_house":"Mutual Fund",
"scheme_type":"Open Ended Schemes",
},
"data":[
{
"date":"22-04-2022",
"nav":"21.64000"
},
{
"date":"21-04-2022",
"nav":"21.69000"
},
{
"date":"20-04-2022",
"nav":"21.53000"
}
],
"status":"SUCCESS"
}
In your situation, I thought that it is required to retrieve the element including "date": "20-04-2022" from the array of data. So, how about the following sample script?
Sample script:
const obj = {
"meta": {
"fund_house": "Mutual Fund",
"scheme_type": "Open Ended Schemes",
},
"data": [
{
"date": "22-04-2022",
"nav": "21.64000"
},
{
"date": "21-04-2022",
"nav": "21.69000"
},
{
"date": "20-04-2022",
"nav": "21.53000"
}
],
"status": "SUCCESS"
};
const search = "20-04-2022";
const res = obj.data.find(({ date }) => date == search);
const value = res && res.nav;
console.log(value) // 21.53000
For example, if the search value is always found, you can use the following script.
const res2 = obj.data.find(({ date }) => date == search).nav;
Reference:
find()
Added 1:
From your following reply,
This looks like standard java script. Does not work in google apps script(script.google.com/home). Getting syntax error for this line : const res = obj.data.find(({ date }) => date == search);
I'm worried that you are not enabling V8 runtime. Ref If you cannot use V8 runtime, how about the following sample script?
Sample script:
var obj = {
"meta": {
"fund_house": "Mutual Fund",
"scheme_type": "Open Ended Schemes",
},
"data": [
{
"date": "22-04-2022",
"nav": "21.64000"
},
{
"date": "21-04-2022",
"nav": "21.69000"
},
{
"date": "20-04-2022",
"nav": "21.53000"
}
],
"status": "SUCCESS"
};
var search = "20-04-2022";
var res = obj.data.filter(function (e) { return e.date == search })[0];
var value = res && res.nav;
console.log(value) // 21.53000
Added 2:
From your following reply,
This looks like standard java script. Does not work in google apps script(script.google.com/home). Getting syntax error for this line : const res = obj.data.find(({ date }) => date == search);
I am trying to write a google apps script to fetch data from a url. But google seems to have its own way of handling the JSON data which I am unable to figure out. developers.google.com/apps-script/guides/services/…
I understood that your actual goal was to retrieve the value using Web Apps. If my understanding of your actual goal, how about the following sample script?
1. Sample script:
Please copy and paste the following script to the script editor and save the script.
function doGet(e) {
var search = e.parameter.search;
var obj = {
"meta": {
"fund_house": "Mutual Fund",
"scheme_type": "Open Ended Schemes",
},
"data": [
{
"date": "22-04-2022",
"nav": "21.64000"
},
{
"date": "21-04-2022",
"nav": "21.69000"
},
{
"date": "20-04-2022",
"nav": "21.53000"
}
],
"status": "SUCCESS"
};
var res = obj.data.filter(function (e) { return e.date == search })[0];
var value = res && res.nav;
return ContentService.createTextOutput(value);
}
I think that this sample script can be used with and without V8 runtime.
2. Deploy Web Apps.
In this case, please check the official document. Please set it as follows.
Execute as: Me
Anyone with Google account: Anyone
In this case, it supposes that you are using new IDE. Please be careful this.
3. Testing.
Please access to the URL like https://script.google.com/macros/s/{deploymentId}/exec?search=20-04-2022 using your browser. By this, the result value is returned.
`
I have set up what I think should be a working JSON output to send a message in slack but Slack keeps rejecting it.
I have tried multiple different message layout formats using the guides on slack's api site, but so far the only method that has successfully sent is a fully flat JSON with no block formatting.
function submitValuesToSlack(e) {
var name = e.values[1];
var caseNumber = e.values[2];
var problemDescription = e.values[3];
var question = e.values[4];
var completedChecklist = e.values[5];
var payload = [{
"channel": postChannel,
"username": postUser,
"icon_emoji": postIcon,
"link_names": 1,
"blocks": [
{
"type": "section",
"fields": [
{
"type": "mrkdwn",
"text": "*Name:*\n " + name
}
]
}]
}];
console.log(JSON.stringify(payload, null, "\t"));
var options = {
'method': 'post',
'payload': JSON.stringify(payload)
};
console.log(options)
var response = UrlFetchApp.fetch(slackIncomingWebhookUrl, options);
}
When I run this, I get the following output:
[
{
"channel":"#tech-support",
"username":"Form Response",
"icon_emoji":":mailbox_with_mail:",
"link_names":1,
"blocks":[
{
"type":"section",
"fields":[
{
"type":"mrkdwn",
"text":"*Name:*\n test"
}
]
}
]
}
]
Which I believe is correct, however slack api just rejects it with an HTTP 400 error "no text"
am I misunderstanding something about block formatting?
EDIT:
To Clarify, formatting works if I use this for my JSON instead of the more complex format:
{
"channel":"#tech-support",
"username":"Form Response",
"icon_emoji":":mailbox_with_mail:",
"link_names":1,
"text":"*Name:*\n test"
}
The reason you are getting the error no_text is because you do not have a valid message text property in your payload. You either need to have a text property as top line parameter (classic style - your example at the bottom) or a text block within a section block.
If you want to put to use blocks only (as you are asking) the section block is called text, not fields. fields is another type of section bock that has a different meaning.
So the correct syntax is:
[
{
"channel":"#tech-support",
"username":"Form Response",
"icon_emoji":":mailbox_with_mail:",
"link_names":1,
"blocks":[
{
"type":"section",
"text":[
{
"type":"mrkdwn",
"text":"*Name:*\n test"
}
]
}
]
}
]
Also see here for the official documentation on it.
Blocks are very powerful, but can be complicated at times. I would recommend to use the message builder to try out your messages and check out the examples in the docu.
I need help with API translation of SAP Leonardo. I building a translation app for studing, and following the documentation a create the method translate:
translate: function () {
//Create JSON Model with URL
var oModel = new sap.ui.model.json.JSONModel();
var langTo = this.getView().byId("idTo").getSelectedKey();
var langFrom = this.getView().byId("idFrom").getSelectedKey();
var textOld = this.getView().byId("idOldText").getValue();
//API Key for API Sandbox
var sHeaders = {
"Content-Type": "application/json",
"APIKey": "My api Key"
};
//Available Security Schemes for productive API Endpoints
//OAuth 2.0
//sending request
//API endpoint for API sandbox
var oData = {
"sourceLanguage": langTo,
"targetLanguages": [
langFrom
],
"units": [{
"value": textOld,
"key": "ANALYZE_SALES_DATA"
}]
};
oModel.loadData("https://sandbox.api.sap.com/ml/translation/translation", oData, true, "POST", null, false, sHeaders);
//Available API Endpoints
//https://mlfproduction-machine-translation.cfapps.eu10.hana.ondemand.com
//https://mlfproduction-machine-translation.cfapps.us10.hana.ondemand.com
//You can assign the created data model to a View and UI5 controls can be bound to it. Please refer documentation available at the below link for more information.
//https://sapui5.hana.ondemand.com/#docs/guide/96804e3315ff440aa0a50fd290805116.html#loio96804e3315ff440aa0a50fd290805116
//The below code snippet for printing on the console is for testing/demonstration purpose only. This must not be done in real UI5 applications.
oModel.attachRequestCompleted(function (oEvent) {
var oData = oEvent.getSource().oData;
// console.log(oData);
});
}
I used two selectBox for to get language keys both calls "idTo" and "idFrom". And I used too a input for get a text will be translate with id "idOldText". But nothing happen. the oData value always empty in the last instruction. I'm used SAP WEBIDE and I guess that it is not need configure IDE for to use the API.
Someone can help me?
it would be helpful if you provide the error from your console.
But I already have a feeling that this ends up in a cross site request, and thus will be blocked because of using a full qualified URL. Also your header whitelist is maybe missing.
Do it like this and it should work:
1) create a destination in SAP CP
2) create a new sapui5 project in SAP WebIDE and adapt neo-app.json by addin a new destination path and header whitelist your request headers
{
"welcomeFile": "/webapp/index.html",
"routes": [{
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
}, {
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
}, {
"path": "/ml-dest",
"target": {
"type": "destination",
"name": "sapui5ml-api"
},
"description": "ML API destination"
}],
"sendWelcomeFileRedirect": true,
"headerWhiteList": [
"APIKey", "Accept", "Content-Type"
]
}
3) add your method and post the request || possible issues in your version: JSON object and request headers
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel();
var sHeaders = {
"Content-Type": "application/json",
"Accept": "application/json",
"APIKey": "<<yourAPIKey>>"
};
var oData = {
"sourceLanguage": "en",
"targetLanguages": [
"de"
],
"units": [{
"value": "I would like to analyze my sales data.",
"key": "ANALYZE_SALES_DATA"
}]
};
var ODataJSON = JSON.stringify(oData);
oModel.loadData("/ml-dest/translation/translation", ODataJSON, true, "POST", null, false, sHeaders);
oModel.attachRequestCompleted(function (oEvent) {
var oData = oEvent.getSource().oData;
console.log(oData.units[0].translations[0]);
});
}
4) get a successful response object when loading your app :-)
References used:
Destination creation (my own blog entry btw.) https://blogs.sap.com/2018/09/05/successfactors-extensions-with-sapui5-and-the-correct-usage-of-sap-cp-destination-services/
SAPUI5 examples for SAP ML Inference Services (see multiple examples) https://developers.sap.com/tutorials/ml-fs-sapui5-img-classification.html
In my webapp I have a page where I use getJSON to get data from server. Firebug shows that it get's JSON from server just the way it is supposed to, but no data is shown. What could be the problem? Here is what my code looks like:
$('#detailsPage').live('pageshow', function(event) {
var id = getUrlVars()["id"];
$.getJSON(serviceURL + 'getemployee.php?id='+id+'&callback=?', displayEmployee);
});
function displayEmployee(data) {
var employee = data.item;
$('#employeePic').attr('src', 'pics/' + employee.PIC);
$('#fullName').text(employee.NAME);
$('#employeeTitle').text(employee.TITLE);
$('#lisatieto').text(employee.INFO);
if (employee.puhelin_nro) {
$('#actionList').append('<li><h3>Soita puhelimeen</h3></li>');
$('#actionList').append('<li><h3>SMS</h3></li>');
}
$('#actionList').listview('refresh');
}
Console shows
employee is undefined
[Break On This Error]
$('#employeePic').attr('src', 'pics/' + employee.PIC);
This is the JSON response:
jQuery164008509381752724021_1336981793995({
"key": [
{
"PIC": "Tuntematon",
"NAME": "0",
"TITLE": "0",
"INFO": "0"
}
]
})
You need to use this
var employee = data.key[0];