I have a situation where in order to get images for a site that I am building, I need to make a http request to an external server for information. Currently, the responses from the requests e in two forms, XML and images. I am doing this using Node.js.

For the XML, I'm able to parse it without issues and it can be passed into a variable and handled like everything else. With the images, I'm stuck, I have no idea how to get them "displayed" on the page after making the request for them. The farthest I have been able to get is to correctly set the request up in postman. My question is, can I pull the image from the body of the response of the request that I'm making to another server and get it to display in the web app that I'm building?

I'm very new to the back end world and am trying to learn as I go. This is an example of what I have been able to do find and use for parsing an XML response that I get from the API

var request = require("request");
var express = require("express");
var jsxml = require("node-jsxml");
var app = express();
var fs = require("fs");

app.get('/users', function(req,res) {
console.log("List of users requested.");
// We will grab the list of users from the specified site, but first we have to grab the site id
// (Same idea as when we added users. We could have checked if req.session.SiteID has been populated,
// but I chose to keep it simple instead)
request(
    {
        url: 'http://' + SERVERURL + '/api/2.0/sites/' + SITE + '?key=name',
        headers: {
            'Content-Type': 'text/xml',
            'X-Tableau-Auth': req.session.authToken
        }
    },
    function(err, response, body) {
        if(err) {
            req.session.err = err;
            res.redirect('/');
        } else {
            var bodyXML = new jsxml.XML(body);

            console.log("site id: " + siteID);
        }
        // OK. We have the site, now let's grab the list of users
        // Since we're just making a GET request, we don't need to build the xml. All the is needed
        // is the SiteID which is inserted in the url and the auth token which is included in the headers
        request(
            {
                url: 'http://' + SERVERURL + '/api/2.0/sites/' + siteID + '/users/',
                headers: {
                    'Content-Type': 'text/xml',
                    'X-Tableau-Auth': authToken
                }
            },
            function(err, response, body) {
                if(err) {
                    req.session.err = err;
                } else {
                    // A succesful request returns xml with a <users> which contains multiple <user> elements.
                    // The <user> elements have name attributes and id attributes which we'll grab, store in a
                    // javascript object and render those in the html that loads.
                    var bodyXML = new jsxml.XML(body);
                    bodyXML.descendants('user').each(function(item, index) {
                        userIDs[item.attribute('name').getValue()] = item.attribute('id').getValue();
                    });
                    for(var user in userIDs) {
                        console.log(user + " " + userIDs[user]);
                    }
                }
                res.render("users.ejs", {
                    err: req.session.err,
                    userIDs: userIDs,
                    site: SITE
                });
            }
        );
    }
);
});

Any help would be hugely appreciated. Thanks!

I have a situation where in order to get images for a site that I am building, I need to make a http request to an external server for information. Currently, the responses from the requests e in two forms, XML and images. I am doing this using Node.js.

For the XML, I'm able to parse it without issues and it can be passed into a variable and handled like everything else. With the images, I'm stuck, I have no idea how to get them "displayed" on the page after making the request for them. The farthest I have been able to get is to correctly set the request up in postman. My question is, can I pull the image from the body of the response of the request that I'm making to another server and get it to display in the web app that I'm building?

I'm very new to the back end world and am trying to learn as I go. This is an example of what I have been able to do find and use for parsing an XML response that I get from the API

var request = require("request");
var express = require("express");
var jsxml = require("node-jsxml");
var app = express();
var fs = require("fs");

app.get('/users', function(req,res) {
console.log("List of users requested.");
// We will grab the list of users from the specified site, but first we have to grab the site id
// (Same idea as when we added users. We could have checked if req.session.SiteID has been populated,
// but I chose to keep it simple instead)
request(
    {
        url: 'http://' + SERVERURL + '/api/2.0/sites/' + SITE + '?key=name',
        headers: {
            'Content-Type': 'text/xml',
            'X-Tableau-Auth': req.session.authToken
        }
    },
    function(err, response, body) {
        if(err) {
            req.session.err = err;
            res.redirect('/');
        } else {
            var bodyXML = new jsxml.XML(body);

            console.log("site id: " + siteID);
        }
        // OK. We have the site, now let's grab the list of users
        // Since we're just making a GET request, we don't need to build the xml. All the is needed
        // is the SiteID which is inserted in the url and the auth token which is included in the headers
        request(
            {
                url: 'http://' + SERVERURL + '/api/2.0/sites/' + siteID + '/users/',
                headers: {
                    'Content-Type': 'text/xml',
                    'X-Tableau-Auth': authToken
                }
            },
            function(err, response, body) {
                if(err) {
                    req.session.err = err;
                } else {
                    // A succesful request returns xml with a <users> which contains multiple <user> elements.
                    // The <user> elements have name attributes and id attributes which we'll grab, store in a
                    // javascript object and render those in the html that loads.
                    var bodyXML = new jsxml.XML(body);
                    bodyXML.descendants('user').each(function(item, index) {
                        userIDs[item.attribute('name').getValue()] = item.attribute('id').getValue();
                    });
                    for(var user in userIDs) {
                        console.log(user + " " + userIDs[user]);
                    }
                }
                res.render("users.ejs", {
                    err: req.session.err,
                    userIDs: userIDs,
                    site: SITE
                });
            }
        );
    }
);
});

Any help would be hugely appreciated. Thanks!

• javascript
• xml
• node.js
• http
• tableau-api

Share Improve this question Follow edited Mar 31, 2016 at 15:42 Stephen Berndt asked Mar 31, 2016 at 15:37 Stephen BerndtStephen Berndt 43311 gold badge55 silver badges1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Step 1: Fetch image and save it on node server. request module documentation on streaming for more options

request('http://google./doodle.png').pipe(fs.createWriteStream('doodle.png'));

Step 2: send the saved image as response.

app.get('/display', function(req, res)) {
  fs.readFile('doodle.png', function(err, data) {
    if (err) throw err; // Fail if the file can't be read.
    else {
      res.writeHead(200, {'Content-Type': 'image/jpeg'});
      res.end(data); // Send the file data to the browser.
    }
  });
};