Possibility, to create a photogallery from images out of JSONs

Hi there,

I’m looking for a possibility, to show images in a photogallery.

The images to show are from an other website. I have access to the JSON were you can see the image URL.
I don’t have any idea, how to show the images.

May you have a possibility?

Currently I’m using Meteor 1.4 with Blaze (I’m new in Meteor so I think Blaze much easier to lern)

I’m thankful for any suggestion!

Thanks a lot,
Kumar

Here’s how I’d approach this:

Create two files named covfefe.json and pence.json, and place them in the folder named private (create it if it doesn’t already exist).

Note that files under the private directory are never served to the client.

private/covfefe.json

{ 
"name": "Donald Covfefe",
"description": "President of the Covfefe",
"imageURL": "https://img.whitehouse.com/potus.webp",
"album": "twitter"
 }

private/pence.json

{ 
"name": "Mike Pence",
"description": "VP of the Covfefe",
"imageURL": "https://img.whitehouse.com/vpotus.webp",
"album": "twitter"
 }

Now that we have our JSON files, we can use the Assets API to read and parse their contents:

Create main.js in the server folder: server/main.js and add the following content

Meteor.startup(function() {
var covfefe = JSON.parse(Assets.getText('/covfefe.json')); 
var pence = JSON.parse(Assets.getText('/pence.json')); 
var presi = [covfefe, pence];
_.each(presi, function(press) {
 // replace this with something like Photos.insert(pres);
console.log(pres); 
   }); 
});

To use Photos.insert(pres), you’ll have to create the Photos collection. You can always publish this collection and subscribe to it from your Blaze helpers to display in your photogallery template.

1 Like

Is this for real or a joke? Pretty sure @kumar1 asked about data from another site, not stored on the meteor server.

He said the images are, but didn’t specify that the json was from another site (just that he has access to them)

That said, the answer missed all the front end stuff, like creating a template that subscribes to the photos collection and renders the image elements pointing to the urls on other people’s websites.

1 Like

Oops! I missed the “an other website” part.

You’ll have to use a Meteor.method client side to reach your Meteor server where you’ll fetch the json with HTTP.get then send it back to the Meteor client. Though HTTP.get is also available on the client, but since it’s a cross domain request, you’ll have to provide Access-Control-Allow-Origin headers to permit cross-domain requests when used on the client. Will reply properly when I get to my desk.

On Meteor, you can just create a method on the server that does the request for you. That way, it’s the server that’s doing the request in behalf of the client code. Meteor HTTP methods can be called synchronously so you can do a return.

On the server

Meteor.methods({
 'remoteGet' : function(url, options){ 
return HTTP.get(url, options);
   } 
});

On the client

Meteor.call('remoteGet', 'http://remoteurl.com/people.json',{ //...options... },
function(error, response){ 
//if an error happened, error argument contains the details 
//if the request succeeded, the response will contain the response of the server request
if (error){ 
console.log("HTTP call GET error: "+err);
 } else { 
var respJson = JSON.parse(response.content); 
console.log("HTTP call GET response: "+JSON.stringify(respJson));
    }; 
})

Hey!
First of all thank you very much and sorry for the late reply, I wasn’t in town.

Yes, the JSONs are on an other server, but for testing it is possible, to use your first solution.
But: I was not able, to just get the image URL.
In the JSON, there are informations like size, author etc. in the field “results” is the field “webResolutionUrlUrl” but I just get the field results, not “webResolutionUrlUrl”. Any ideas?

Thank you very much!