I am a part of a student project to build a website that offers users a way to search for items in an online library catalog that are all part of some collection. The details of the project are not super important. I am responsible for writing the "backend", which in this case is just writing a function to send a request to the library's RESTful API and returning JSON objects. The front end team will use the JSON objects returned to populate a results page built with React. This is my first serious project with JS and I want to make sure I am doing things correctly. Below is my ApiWrapper.js file.
var $ = require('jquery')
class ApiWrapper{
static makeCall({subject="", topic="", rights="", title="", format="", collection="", state="", creator="", date="", other="", language="", page=""} = {}) {
// sends a request to the dpla api and returns a list of json objects
// example call: ApiWrapper.makeCall({language:"english"})
var url = "https://api.dp.la/v2/items?"
var apiKey = "&api_key=foo"
var parameters = "sourceResource.description=some+collection"
var results
if(subject !== ""){
subject = String(subject)
subject = subject.split(" ").join("+")
// replaces all the spaces with +
parameters = parameters + "&sourceResource.subject=" + subject
}
if(rights !== ""){
rights = String(rights)
rights = rights.split(" ").join("+")
parameters = parameters + "&sourceResource.rights=" + rights
}
if(title !== ""){
title = String(title)
title = title.split(" ").join("+")
parameters = parameters + "&sourceResource.title=" + title
}
if(format !== ""){
format = String(format)
format = format.split(" ").join("+")
parameters = parameters + "&sourceResource.format=" + format
}
if(collection !== ""){
collection = String(collection)
collection = collection.split(" ").join("+")
parameters = parameters + "&sourceResource.collection=" + collection
}
if(state !== ""){
state = String(state)
state = state.split(" ").join("+")
parameters = parameters + "&sourceResource.spatial.state=" + state
}
if(creator !== ""){
creator = String(creator)
creator = creator.split(" ").join("+")
parameters = parameters + "&sourceResource.creator=" + creator
}
if(date !== ""){
date = String(date)
date = date.split(" ").join("+")
parameters = parameters + "&sourceResource.date.displayDate=" + date
}
if(other !== ""){
other = String(other)
other = other.split(" ").join("+")
parameters = parameters + "&q=" + other
}
if(language !== ""){
language = String(language)
language = language.split(" ").join("+")
parameters = parameters + "&sourceResource.language=" + language
}
if(page !== ""){
page = String(page)
page = page.split(" ").join("+")
parameters = parameters + "&page=" + page
}
url = url + parameters + apiKey
$.getJSON(url, function(result){
results = result.docs
});
// getJSON directly returns the json object returned from the dpla api in result
// results returns the array contained in the docs field of the response
return results
}
}
export default ApiWrapper;
Here is my test code/example of how I expect my code to be called:
var $ = require('jquery')
$.ajaxSetup({
async: false
});
var results = ApiWrapper.makeCall({language:"english"})
console.log(results)
This is functional, but I am not sure how elegant/"correct" it is. Are there standard practices I am ignoring? Is there a more JS-ic way to do this (a la doing things the pythonic way)? Currently I'm returning an array of JSON objects to be parsed by the front end guys. Is there a friendlier way to return the data to be used in a React UI?