Reason for different API responses to request in node and chrome? - node.js

So I have a bunch of tracks from Spotify's API and I want their genres (which Spotify doesn't give) so for every track I make an API call to Last FM to get their top tags. Now this works for most tracks, I have to match the track name and artist as strings to last fm:
Here's my problem:
I do like this (pseudo:ish code):
let promises = spotifyTracks
.map(track => rp({url: "http://lastfmapi.com/?artist="+track.artist+"?track="+track.name })
.then(response => {
track.genre = response.genre;
return track;
})
);
return Promise.all(promises).then(() => console.log('done!'));
Using request promise.
Now there a few tracks that currrently baffles me. Like 10 in 600. I get a response from lastFM saying:
{ error: 6, message: 'Track not found', links: [] }
To double check I printed the url used:
"http://lastfmapi.com/?artist="+track.artist+"?track="+track.name
Inside the then-call along with the response.
Now if I copied that url from my output and pasted it right into my chrome-browsers address-bar, the API finds the track!?!??!
the actual example
http://ws.audioscrobbler.com/2.0/?method=track.gettoptags&artist=pugh+rogefeldt&track=små+lätta+moln&autocorrect=1&api_key=141bed9ffc180dd9b07ac93b7e3b56d7&format=json
When it is called in my node-code I get
{ error: 6, message: 'Track not found', links: [] }
when called in the chrome address bar I get
{"toptags": {
"tag":
[
{
"count":100,
"name":"swedish",
"url":"https://www.last.fm/tag/swedish"
},
{
"count":100,
"name":"singer-songwriter",
"url":"https://www.last.fm/tag/singer-songwriter"
},
...
],
"#attr":{
"artist":"Pugh Rogefeldt",
"track":"Små lätta moln"
}
}
}
Anyone got any idea what could be the reason behind this discrepancy?

Chrome address bar will encode the string into URL for you, which will make your actual example become
method=track.gettoptags&artist=pugh+rogefeldt&track=sm%C3%A5+l%C3%A4tta+moln&autocorrect=1&api_key=141bed9ffc180dd9b07ac93b7e3b56d7&format=json
You should do the same thing in your node-code with encodeURIComponent

Related

requests module returns JSON with items unordered

When I'm using node's requests module this way:
router.get('http://[some_api_url]')
res.send()
I get different JSON ordered in contrary to viewing the JSON via browser.
For example, via res.send() I get:
[{"key1":"value1","key2":"value2"},{"key1":"value1","key2":"value2"}]
Whereas via browser I see it as supposed to be:
[{"key2":"value2","key1":"value1"},{"key2":"value2","key1":"value1"}],
The function is this:
getAllEvnets:async(req, res)=> {
let event = []
try{
var listEvent = await events.findAll()
for (let i = 0; i < listEvent.length; i++) {
event.push({
id: listEvent[i].id_event,
start: listEvent[i].debut,
end : listEvent[i].fin,
title: listEvent[i].title,
color: {red: {
primary: '#ad2121',
secondary: '#FAE3E3'}
},
actions: ''
})
}
res.json(event)
}
catch(err){
res.send(err.message)
}
}
ECMAscript says...
The mechanics and order of enumerating the properties ... is not
specified.
So there is no guarantee that it will be ordered. Anyway usually it dont need it to be ordered you acces it with an dot notation like key1.value1. No matter if its the first property in the object or the last one, it doenst matter.

CDON API RESTful Api GET request

I'm currently working on fetching customer data from cdon, it's an e-commerce platform. They have their API documentation here:
CDON Api Docu
First let me show you my code:
myToken = '<token here>'
myUrl = 'https://admin.marketplace.cdon.com/api/reports/d8578ef8-723d-46cb-bb08-af8c9b5cca4c'
head = {'Authorization': 'token {}'.format(myToken),
'Status':'Online',
'format':'json'}
filters = '?filter={"Status":["Online"],"format": ["json"] }}'
response = requests.get(myUrl + filters, headers=head)
report = response.json()
print(report.products)
This is returning only the parameters. like for example at at this JSON: CDON Github
Status has a value Online this online is a group of itemsthat I only want to get.
What I'm trying to get is a response like this:
{
"Products": [
{
"SKU": "322352",
"Title": "Fabric Cover",
"GTIN": "532523626",
"ManufacturerArticleNumber": "",
"StatusCDON": "Online",
"ExposeStatusCDON": "Buyable",
"InStock": 0,
"InStockCDON": 0,
"CurrentPriceSE": null,
"OrdinaryPriceSE": null,
"CurrentPriceCDONSE": 299.0000,
"OrdinaryPriceCDONSE": null,
"CurrentPriceDK": null,
"OrdinaryPriceDK": null,
"CurrentPriceCDONDK": null,
"OrdinaryPriceCDONDK": null,
"CurrentPriceNO": null,
"OrdinaryPriceNO": null,
"CurrentPriceCDONNO": null,
"OrdinaryPriceCDONNO": null,
"CurrentPriceFI": null,
"OrdinaryPriceFI": null,
"CurrentPriceCDONFI": null,
"OrdinaryPriceCDONFI": null
},
Which means the full list of the items that are Online
How should I put this... among all the API's I tried this one is very confusing, is this even RestFul? If I can achieve the python equivalent of this C# sample code:
public string Post(Guid repordId, string path)
{
var filter = new JavaScriptSerializer().Serialize(new
{
States = new[] { "0" } // Pending state
});
var content = new FormUrlEncodedContent(new[]
{
new KeyValuePair("ReportId", repordId.ToString()),
new KeyValuePair("format", "json"),
new KeyValuePair("filter", filter)
});
var httpClient = new HttpClient() { BaseAddress = new Uri("https://admin.marketplace.cdon.com/") };
httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("api", ApiKey);
var response = httpClient.PostAsync(path, content).Result;
response.EnsureSuccessStatusCode();
return response.Content.ReadAsStringAsync().Result;
}
I may be able to undestand how this API works, the response that I got was taken manually from their report function in JSON format.
Image
I made many attempts and at that code ( my code ) I stopped, being on this for 4 hours made me give up and ask. Trust that I have searched as many references as I could. It's really confusing.
How do I get the response that I want? Filtering via url? or via header? is this even restful? Help T_T
The documentation states in the first line, emphasis mine:
In order to generate a report you perform a POST call to the reports API with the parameters you wish to use for the report.
Your Python code does not make a POST request, you are trying a GET request. The documentation goes on
[...] to filter on Swedish orders you set the CountryCodes
attribute to “Sweden” and to get returned and cancelled orders you set
the States attribute to 2 and 3. So in the end the filter would look
like this:
{
"CountryCodes": [ "Sweden" ],
"States": ["2", "3"]
}
So you need to prepare a filter object (a dictionary in Python) with the filters you want. Luckily the Python syntax for dictionaries is equivalent (Python is flexible and also allows single-quoted strings):
filter = {
'CountryCodes': [ 'Sweden' ],
'States': [ '0' ]
}
The documentation goes on
You then post the parameters as form data (content-type:
application/x-www-form-urlencoded) so the request body would look like
this:
ReportId=d4ea173d-bfbc-48f5-b121-60f1a5d35a34&format=json&filter={"CountryCodes":["Sweden"],"States":["2","3"]}
application/x-www-form-urlencoded is the default for HTTP post, the requests module knows that and does this for you automatically. All you need to do is to prepare a data dict which will contain the data you want to post.
data = {
'ReportId': 'd4ea173d-bfbc-48f5-b121-60f1a5d35a34',
'format': 'json'
'filter': json.dumps(filter)
}
The filter parameter is supposed to be in JSON format. You must encode that yourself via json.dumps().
import json
head = { ... as above }
filter = { ... as above }
data = { ... as above }
response = requests.post(url, data, header=head)
I'll leave figuring out setting the Authorization header properly as an exercise for you. Partly because it isn't hard, partly because I have no intention of creating an API key with this website just for testing this and partly because it's entirely possible that your current header already works.

Getting image URL from Contentful entry id

I need to get an image URL from Contentful entry id.
I am getting such an JSON from Contentful query
{
"sys":{
"space":{
"sys":{
"type":"Link",
"linkType":"Space",
"id":"8v1e7eaw70p2"
}
},
"id":"1JfEwVlD9WmYikE8kS8iCA",
"type":"Entry",
"createdAt":"2018-02-28T18:50:08.758Z",
"updatedAt":"2018-02-28T18:50:08.758Z",
"revision":1,
"contentType":{
"sys":{
"type":"Link",
"linkType":"ContentType",
"id":"image"
}
},
"locale":"en-US"
},
"fields":{
"name":"heat",
"image":{
"sys":{
"type":"Link",
"linkType":"Asset",
"id":"6Inruq2U0M2kOYsSAu8Ywk"
}
}
}
}
I am using JS driver they provide:
client.getEntry()
so how to go thru that link: 6Inruq2U0M2kOYsSAu8Ywk ?
Unfortunately, the js SDK will not be able to resolve links when using the single entry endpoint i.e client.getEntry() because there won't be enough data.
When thing I always recommend to work around this is to use the collection endpoint with a query the desired id as a query param. This way you will always get the desired entry with all it's linked data.
Your code should look something like this
client.getEntries({'sys.id': '6Inruq2U0M2kOYsSAu8Ywk'})
.then(response => console.log(response.items[0].fields.image.fields.file.url))
I hope that helps.
Best,
Khaled
Use client.getEntries({'sys.id': '1JfEwVlD9WmYikE8kS8iCA'})
To get the entry fields and the asset fields.
You can also patch the assets to the fields by running this after fetching the data:
/* Patch all the assets to the fields */
const patchAssets = (fields, assets) => {
Object.keys(fields).forEach(function (key) {
let obj = fields[key];
if (obj.sys && obj.sys.linkType === 'Asset') {
const assetId = obj.sys.id;
const matchAsset = assets.find(asset => {
return asset.id === assetId;
});
obj.file = matchAsset;
}
});
return fields;
};
Another way to get image url is to use getAsset('<asset_id>'). So first, using the getEntry() method, you need to get the entry data, then extract the id from the field: fields.image.sys.id, and pass it to the getAsset method.

Vuetify - how to make pagination?

I want to use pagination from Vuetify framework for VueJS.
Pagination component from Vuetify:
<v-pagination
v-model="pagination.page"
:length="pagination.total / 5"
:total-visible="pagination.visible"
></v-pagination>
I want to execute a function when the user clicks on a button. I want to get the page number and then execute the function with this page number in parameter.
Code from getItems from methods:
this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage
Data:
data () {
return {
items: [],
pagination: {
page: 1,
total: 0,
perPage: 0,
visible: 7
}
}
}
checkout the docs on the events section. I found the input event to handle new page.
<v-pagination
v-model="pagination.page"
:length="pagination.pages"
#input="next"
></v-pagination>
and my next method:
next (page) {
api.getBillList(page)
.then(response => {
this.bills = response.data.content
console.log(this.bills)
})
.catch(error => {
console.log(error)
})
}
COMMENT:
Before you implement pagination, try to see if you really need it in the first place, or you can use alternatives:
https://slack.engineering/evolving-api-pagination-at-slack-1c1f644f8e12
https://dzone.com/articles/why-most-programmers-get-pagination-wrong
http://allyouneedisbackend.com/blog/2017/09/24/the-sql-i-love-part-1-scanning-large-table/
https://www.xarg.org/2011/10/optimized-pagination-using-mysql/
https://www.eversql.com/faster-pagination-in-mysql-why-order-by-with-limit-and-offset-is-slow/
**ANSWER:**
You can react on pagination.page change with watcher since pagination.page changes on button click, and then execute your method.
watch: {
"pagination.page": (newPage) => {
this.onPageChange(newPage);
}
}
Or react on component's input event:
<v-pagination
#input="onPageChange"
></v-pagination>
I arrived here after searching for an error I received trying to implement this pagination in my VueJS project: [Vue warn]: Invalid prop: custom validator check failed for prop "length"..
My problem, and it looks like a problem you may have in your question's example code, was my calculation of length was arriving at a decimal answer. For example, if I had 23 records and a page size of 5, it would return 4.6, giving me the error above. I had to wrap my calculation in a Math.ceil() to arrive at the appropriate value for length.
Hope this helps someone :)
<v-pagination
v-model="currPage"
:length="Math.ceil(arr.length / pageSize)"
:total-visible="6"
></v-pagination>

ember.js update view after PUT using node.js/express

I'm pretty new to ember. I have a basic ember app in place with a CRUD page. I'm having trouble refreshing the view/template of the CRUD page after making a PUT request to a node API using mongoDB.
When I delete a model, the page refreshes fine, but not when I PUT. If I refresh the page, everything is fine and working, but I want the view to refresh as soon as I click the "approve" button I have.
Can someone point me in the right direction of how I should be dealing with this in Ember? Or am I not returning something properly from my API and Ember is doing what it should?
Thanks
Node API PUT:
router.put( '/:id', function( req, res ) {
return Picture.findById( req.params.id, function( err, picture ) {
picture.status = req.body.picture.status;
picture.url = req.body.picture.url;
//...and so on
return picture.save( function( err ) {
if( !err ) { return res.send( picture ); }
return res.send('ERROR');
});
});
});
Model:
App.Picture = DS.Model.extend
authorName: DS.attr('string')
pictureName: DS.attr('string')
url: DS.attr('string')
tags: DS.attr('string')
status: DS.attr('string')
Route:
App.AdminRoute = Ember.Route.extend
model: ->
return #store.find 'picture'
actions:
delete: (picture) ->
picture.destroyRecord() # view updates fine
approve: (picture) ->
picture.set('status', 'verified')
picture.save()
Note - I'm also getting this error in my console that I have no understanding of - I don't remember always getting it though, so I'm not sure how much it's related.
Error: No model was found for 'v'
at new Error (native)
at Error.r (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:992)
at Ember.Object.extend.modelFor (http://localhost:3000/javascripts/libs/ember-data.js:3:4754)
at t.default.i.extend.extractSingle (http://localhost:3000/javascripts/libs/ember-data.js:1:23642)
at y (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:30411)
at r [as extractSingle] (http://localhost:3000/javascripts/libs/ember-1.7.0.js:4:28863)
at e.default.Ember.Object.extend.extractSave (http://localhost:3000/javascripts/libs/ember-data.js:1:22390)
at e.default.Ember.Object.extend.extractUpdateRecord (http://localhost:3000/javascripts/libs/ember-data.js:1:22097)
at e.default.Ember.Object.extend.extract (http://localhost:3000/javascripts/libs/ember-data.js:1:21661)
at http://localhost:3000/javascripts/libs/ember-data.js:3:9807
The JSON payload being returned from the server is not in a format suitable for Ember to determine the model type. Ember is expecting something like this:
{
picture: {
"_id":"5428abf33e733af2fc0007ff","authorName":"Ben","pictureName":"Proud Chicken",
"status":"verified","tags":null,"url":"benrlodge.github.io/isotopeSearchFilter/img/four.jpg"
}
}
Since you say it works when you refresh, try comparing this payload with what is returned from the GET. The PUT response should be similar.
Refer to this Ember guide: http://emberjs.com/guides/models/connecting-to-an-http-server/#toc_json-conventions
To tweak the payload and (for example) remove the offending property, you can do this:
App.PictureSerializer = DS.RESTSerializer.extend({
normalizePayload: function(payload) {
if (payload['__v']) {
delete payload['__v'];
}
return this._super(payload);
}
});
This example is for PictureSerializer, but if you made it ApplicationSerializer it would work for any type. See the API here: http://emberjs.com/api/data/classes/DS.RESTSerializer.html#method_normalize

Resources