can't show/display image from mongodb to directly react js component - reactjs

I am new to MERN stack. I have already tried a lot of youtube videos and google searches to show/display the images stored in mongodb as the schema :
photograph: {
data : Buffer,
contentType : String
}
It saved successfully in mongodb after few efforts. I tried to convert it into base64 as done by other youtubers but still no results so far.
All of the commented out- (img tags) and array.map functions -> (because i tried to convert my data to array instead of json and then use .map function) are the things i have already tried. I am trying to understand the basics here. so please suggest me simple methods to do it. Also remember that {user.name} {user.dateOfBirth} , etc type of all other data showing successfully.

Related

How do get the result from REST website that returns only text?

I'm trying to use a REST web service from Geonames.org. When I try to manually put in the url with the parameters, it would only return the Country Code. I've tried to search for ways to implement it, but most of what I've seen return JSON text with multiple keys and data. I feel like the answer should be pretty simple, but I'm unsure.
I'm trying to use this for a React project I'm working on.
Here is an example of what the url returns
Just looked into the docs of that API, and it says if you want to receive JSON responses simply add JSON keyword to the endpoint. Like here for given endpoint you have:
http://api.geonames.org/countryCodeJSON?formatted=true&lat=47.03&lng=10.2&username=demo
so just change countryCode to countryCodeJSON.
Source: http://www.geonames.org/export/JSON-webservices.html

Obtaining Weather Data From NOAA

I am trying to use the API to return data from the Chagrin Falls station in Ohio. I can get the data from the website so I know there is data, but the API does not return any values.
I have a valid token and the examples in the documentation work, but if I try any to alter the examples in any way I get nothing back just any empty json object {}.
Example I am trying to use:
https://www.ncdc.noaa.gov/cdo-web/api/v2/data?datasetid=GSOM&stationid=GHCND:US1OHGG0014&units=standard&startdate=2020-08-01&enddate=2020-08-01&limit=1000
Data from the website:
https://www.ncdc.noaa.gov/cdo-web/datasets/GHCND/stations/GHCND:US1OHGG0014/detail
I don't exactly know how you are going to achieve this since you haven't told us what programming language you are using. However, with python I use a module called urllib to extract raw html data from a url that can be seen from the browser using ctrl+u.

How to upload image with other data into the google drive app specific folder and get back into the app in json formate in Swift

I have successfully integration the google drive sync by using this link has the source code
And now I am not able to upload image with its name id and location,
I want to upload image with some other fields like name, height, width into the app specific private folder,
If this is not possible can any one suggest me how to go with this:
Actually I have to sync application list data in which list contains images, title, comments ratings and so forth. I am able to upload all other fields except images in json formate, any suggestion upload some type of approach to get this
Found the solution
It is not proper solution but till I am not getting the exact solution, perfect for me.
To upload image with other request data, I have followed following steps:
Convert the image into data using one of the following way
Swift 4
let dataObj = image.pngData()
Swift 3
let dataObj = UIImagePNGRepresentation(image)
And convert this data objet to string with utf8
let str = String(decoding: data, as: UTF8.self)
Use this string to upload with other requst param or data.
And don't forgot to mention the type with this, so that you can easily convert this string to data again and from data, image easily can convert.

How to parse and play Blob/Binary data from database in Angular 5

In my Angular 5 application, I am retrieving data which is stored as VARBINARY(MAX) in SQL Server database. It looks like this in the database field: 0xFEA47E451A40AE4571E51F...
When I retrieve it from database using a GET call via .NET WebAPI, it is shown like this in console from my Angular app: aFwwbUYFjhvbv=bhBGVJHvchjhcbsHKfvHbbh...
I know the MIME type of this data (it is either MP3 or WAV). How can I parse/read this data in Angular 5 client and play it using an HTML <audio> component?
I have looked at several related solutions but none seem to be applicable due to one error or another, or perhaps there is a lack of understanding on my part.
My assumptions are that Blob data has the audio content which I can play. I have to convert it to a File first. This is what I am trying:
const file = new File([blobData], "audio.mp3")
this.audioSource = URL.createObjectURL(file)
And in the HTML, I assign audioSource as the source of an HTML5 component.
<audio [src]="audioSource" type="audio/mp3"></audio>
This results in a net::ERR_UNKNOWN_URL_SCHEME error.
I tried sanitizer.bypassSecurityTrustUrl(this.audioSource) as well but this doesn't work either. What am I doing wrong, and how can I get the intended effect?
please check this answer : https://stackoverflow.com/a/40329529/1160236
if you have blob data with correct binaries all you have to do is to create URL using URL.createObjectURL(blob) then pass it to the audio tag as a source. (check step-3)
if you don't have blob data with correct binaries you can create blob data as shown in step-2.
I have created an Angular example which uses DomSanitizer via a custom pipe.
<audio [src]="audioSource | safe:'url'" id="audio" controls #audioTag></audio>
Reference : https://stackoverflow.com/a/40329529/1160236
Angular implementation using reference : https://stackblitz.com/edit/angular-audio-blob
DomSanitizer example: https://medium.com/#swarnakishore/angular-safe-pipe-implementation-to-bypass-domsanitizer-stripping-out-content-c1bf0f1cc36b
I hope this will help. just remember all you need is valid blob data.

ValueError("No JSON object could be decoded") Python googlemaps

I am using Google app engine (v1.9.24) with flask (v0.10.1) and python (v2.7.5).
I'm trying to get the googlemaps (v2.2) API to work with my app.
I know the JSON returned is badly formatted but I don't why.
My code is below:
import googlemaps
gmaps = googlemaps.Client(key='API_KEY')
geocode_result = gmaps.geocode('6b, oko awo, victoria island, lagos')
return geocode_result
This works perfectly, but returns a badly formatted JSON string (I confirmed this by running the same code on my local machine).
I used JSON validator to validate the JSON it returned. And because of the badly fomatted JSON my flask app crashes and gives me a ValueError.
I don't know a way around this and I'd appreciate any help.
The problem is not with the JSON. Actually,
gmaps.geocode('6b, oko awo, victoria island, lagos')
doesn't return JSON at all, it returns a list that holds the value of "result" as documented in the google docs, as you can see here in the source code for googlemaps library.
What is actually returned is a list object filled with data. All the string values inside this list are unicode strings. That means they look like u'hello' instead of plain "hello" (note the double quotes) that json.loads() expects (I assume that is how you are trying to load the JSON).
This probably means that the problem you're trying to solve a non existing problem. You don't have to load the JSON, because it already is a python list object.
You can confirm by doing
json.loads(json.dumps(geocode_result))
it works fine, meaning there is no problem with the JSON structure.

Resources