Getting values from http request in nodejs

2018-05-16 06:09 Jacob imported from Stackoverflow

var latLon = "40.8,-77.8"; //Lat/lon
var cityCode = ""; //City code
var cityName = "";
var latLongCityCodeURL = ("http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=" + weatherKey + "&q=" + latLon);

//Current Conditions Vars
var ccWeatherText = ""; //Text for weather at location
var ccTemp = 0; //Degrees Farenheit
var ccIcon = 0; //weather icon number https://developer.accuweather.com/weather-icons
var ccURL = "test"; //URL for get
//12 hour forecast Conditions Vars


//5 day forecast conditions Vars

//Get city code
http.get(latLongCityCodeURL, (resp) => {
    var that = this;
    resp.on("data", (chunk) => {
        var result = JSON.parse(chunk);
        var cityCode = result.Key;
        var cityName = result.EnglishName;
        console.log(cityCode + " " + cityName);
        that.cityName = cityName;
        that.cityCode = cityCode;
    });

}).on("error", (err) => {
    console.log("Error: " + err.message);
});


console.log(cityCode + " " + cityName);

So my issue is, I am making an http request using require('http'), what I want to do is parse the data and store it in my global variables so that I can use them for other requests. I have tried using var that=this and I have tried just assigning my global variables to the data. I am not sure how to do it, i just keep getting undefined. I know it has something to do with ASYNC and also something to do with the scope. Please help

6 answers

answered 2018-05-16 06:24 scetiner
Your code block runs in a synchronized way and console.log part hits just after http.get call. The thing is http.get is an async function and its callback part will be called future ticks of NodeJS when your response has arrived.

answered 2018-05-16 06:27 Arif Khan

You can use Promise to make http request, here is code that may help you

const httpGet = url => {
    return new Promise((resolve, reject) => {
        http.get(url, res => {
            let body = '';
            res.on('data', chunk => body += chunk);
            res.on('end', () => {
                try {
                    body = JSON.parse(body);
                } catch (err) {
                    reject(new Error(err));
                }
                resolve({
                    cityCode: body.Key,
                    cityName: body.EnglishName
                });
            });
        }).on('error', reject);
    });
};


httpGet(latLongCityCodeURL).then(data => {
    console.log(data.cityCode + " " + data.cityName);
}).catch(err => console.log('Got error ', err));

answered 2018-05-16 06:28 cricket_007
You must wait for the response, then send the other requests or log into. The scope isn't really the issue here, it's the order of operations that you're missing. You define a variable, then wait for a HTTP request, meanwhile you're immediately logging a value, then the request finishes (or times out or other error), and you can log again the value - at which point you see data.

In other words, to fix the issue, other requests must be made from within a function of resp.on("end", which says when you've finished getting all data chunks

And by "within", the code can still be in a separate method, outside those brackets, but you must call that particular function from within that response body.

You should pass such asynchronous returned data through parameter variables, not update some external, global state in most cases

answered 2018-05-16 06:30 Terry Lennox

You can save your result to a variable at various levels of scope.. just remember that most i/o calls in Node.js are asynchronous. Here's an example:

var latLon = "40.8,-77.8"; //Lat/lon
var cityCode = ""; //City code
var cityName = "";
var latLongCityCodeURL = ("http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=" + weatherKey + "&q=" + latLon);

//Current Conditions Vars
var ccWeatherText = ""; //Text for weather at location
var ccTemp = 0; //Degrees Farenheit
var ccIcon = 0; //weather icon number https://developer.accuweather.com/weather-icons
var ccURL = "test"; //URL for get


var savedResult = null;

//Get city code
http.get(latLongCityCodeURL, (resp) => {
    var jsonData = '';
    resp.on("data", (chunk) => {
        jsonData += chunk;
    });
    resp.on("end", () => {
        savedResult = JSON.parse(jsonData);
    });
}).on("error", (err) => {
    console.log("Error: " + err.message);
});


// Display saved result once available.
setTimeout(displaySavedResult, 2000);

function displaySavedResult() {
    if (!savedResult) {
        console.log('Last result is null!');
    } else {
        console.log('Last result: City Code: ' + savedResult.Key + " Name" + savedResult.EnglishName);
        console.log('Last result (all properties): ', JSON.stringify(savedResult, null, 2));
    }
}

answered 2018-05-16 06:35 anshuVersatile

var http = require('http');
var latLon = "40.8,-77.8"; //Lat/lon
var cityCode = ""; //City code
var cityName = "";
var latLongCityCodeURL = ("http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=" + "fmKWSgaG5EAA0diCP2lSREEOYG6PC5q9" + "&q=" + latLon);
var that;
//Current Conditions Vars
var ccWeatherText = ""; //Text for weather at location
var ccTemp = 0; //Degrees Farenheit
var ccIcon = 0; //weather icon number https://developer.accuweather.com/weather-icons
var ccURL = "test"; //URL for get
//12 hour forecast Conditions Vars


//5 day forecast conditions Vars

//Get city code
getWeather = url => {
    return new Promise((resolve, reject) => {
        http.get(url, res => {
            let body = '';
            res.on('data', chunk => resolve(JSON.parse(chunk)));
        }).on('error', reject);
    });
};


getWeather(latLongCityCodeURL).then( weather => {
    console.log(weather.Key + " " + weather.EnglishName);
})

answered 2018-05-16 06:35 owaishanif786

var latLon = "40.8,-77.8"; 
var latLongCityCodeURL = ("http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=" + weatherKey + "&q=" + latLon);

//Current Conditions Vars
var ccWeatherText = ""; //Text for weather at location
var ccTemp = 0; //Degrees Farenheit
var ccIcon = 0; //weather icon number https://developer.accuweather.com/weather-icons
var ccURL = "test"; //URL for get
//12 hour forecast Conditions Vars


//5 day forecast conditions Vars


//Get city code
function getCityCode(latLongCityCodeURL){
 return new Promise((resolve, reject) => {
  http.get(latLongCityCodeURL, (resp) => {
    resp.on("data", (chunk) => {
        var result = JSON.parse(chunk);
        var cityCode = result.Key;
        var cityName = result.EnglishName;
        resolve({cityCode, cityName});
    });

    }).on("error", (err) => {
       reject(err);
      console.log("Error: " + err.message);
   });

 })
}


getCityCode(latLongCityCodeURL)
.then((result) => { 
 console.log(result.cityCode, result.cityName) 
}).catch((err) => console.log(err))

Another way is to use async-await API interface which is supported in node 8.

async function getCityCode(latLongCityCodeURL){
 const result = await http.get(latLongCityCodeURL, (resp) => {
        resp.on("data", (chunk) => {
            var result = JSON.parse(chunk);
            var cityCode = result.Key;
            var cityName = result.EnglishName;
            return {cityCode, cityName};
        });

        }).on("error", (err) => {
           return err;
          console.log("Error: " + err.message);
       });

  return result;
}

getCityCode(latLongCityCodeURL)
.then((res) => { 

console.log(res.cityCode, res.cityName)

})

See also questions close to this topic

Adding a constructor to an injected Project Class

I'm trying to add a constructor, which I call ctor, to Project, so I can add to it some properties when it's instantiated.

Here's the (absolutely ghastly) hack I'm using on Item to make this tick:

const canvas = document.querySelector('canvas')
paper.setup(canvas)

paper.Item.inject({
  ctor: function(args) {
    console.log('Item constructed!')
  }
})

// All Items are supposed to call `_initialize` so we "hook" there.
const Item_initialize = paper.Item.prototype._initialize
const Item_ctor = paper.Item.prototype.ctor

paper.Item.prototype._initialize = function(...args) {
  const initializer = Item_initialize.apply(this, args)
  if (Item_ctor) Item_ctor.apply(this)

  return initializer
}

const path = new paper.Path.Line({
	strokeColor: 'black',
  strokeWidth: 5,
  from: 100,
  to: 50
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-core.js"></script>
<canvas></canvas>

Unfortunately the above trick doesn't work on Project:

const canvas = document.querySelector('canvas')
paper.setup(canvas)

paper.Project.inject({
  ctor: function(args) {
    // Not called
    console.log('Project constructed!')
  }
})

const Project_initialize = paper.Project.prototype._initialize
const Project_ctor = paper.Project.prototype.ctor

paper.Project.prototype._initialize = function(...args) {
  const initializer = Project_initialize.apply(this, args)
  if (Project_ctor) Project_ctor.apply(this)

  return initializer
}

const project = new paper.Project(canvas)

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-core.js"></script>
<canvas></canvas>

What am I missing here?

How to delete div and all element inside div? Javascript, html, css

I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.

<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content" style="display: flex;">



         <div class="modal-body">


            <form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">

               <div class="container-fluid">

                  <div class="step_1"  >
                     <h3 class="modal-title">Reifenmontage Termin buchen  </h3>
                     <div class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Pneu-Typ</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-6">
                           <div class="row">
                              <select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
                                 <option value="Motorrad">Motorrad</option>
                                 <option value="Auto">Auto</option>
                              </select>
                           </div>
                        </div>
                     </div>
                     <div id="additionalRow"  class="row termin_row" >
                     <div id="reifenmontage-input" class="row termin_row">
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <label>Mark und model</label>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="marka" class="form-control" id="button-getdata">
                              </select>
                           </div>
                        </div>
                        <div class="col-xs-12 col-sm-4">
                           <div class="row">
                              <select name="model" class="form-control" id="result" > 
                              </select> 
                           </div>
                        </div>

                     </div>
                     </div>
                     <div class="row termin_row">
                        <div class="col-sm-4 col-xs-12">
                           <div class="row"><label>2. Terminvorschlag</label></div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group date" id="date-2" data-termin="1">
                                 <input type='text' class="form-control" name="date[1]" />
                                 <span class="input-group-addon">um</span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-4 col-xs-6">
                           <div class="row">
                              <div class="input-group time" id="time-2" data-termin="1">
                                 <input type='text' class="form-control" name="time[1]" />
                                 <span class="input-group-addon">Uhr</span>
                              </div>
                           </div>
                        </div>
                     </div>

                     <div class="row">
                        <div class="checkbox">
                           <label>
                              <input type="checkbox" name="accept" id="accept"> Ich akzeptiere die <a href="teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a>
                           </label>
                        </div>
                     </div>

                     <div class="row text-center">
                        <button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
                     </div>
                  </div>

                  <div class="step_2">
                     <h3 class="modal-title">Your contact info</h3>

                     <div class="">
                        <div class="form-group clearfix">
                           <input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
                        </div>
                        <div class="form-group clearfix">
                           <input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
                        </div>
                        <div class="text-center">
                           <button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
                        </div>
                     </div>

                  </div>

               </div>

            </form>

         </div>
         <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
         </div>
      </div>
   </div>
</div>

and my script tag

<script type="text/javascript">
   let selectItem = document.getElementById('pneu');
   let additionalRow = document.getElementById('additionalRow');
   function checkSelected() {
      if (selectItem.selectedIndex == "1") {
         additionalRow.style.display = 'none';
      } else {
         additionalRow.style.display = 'block';
      }
   }
</script> 

<script type="text/javascript">
$('#button-getdata').on('change', function() {
    $.ajax({
        url: 'index.php?route=api/reifenmontage/get_marka_data',
        type: 'post',
        data: $('#reifenmontage-input select'),
        dataType: 'json',
        beforeSend: function() {

        },
        success: function(json) {

            if (json['success']) {
               $("#result").empty();
                for (i in json['success']) {
                var element = json['success'][i];
                var o = new Option(element['model'], element['model']);
               $("#result").append(o);
                    html = "\t<option   value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
                    $("#result").append(o); 
                }
               //  document.getElementById("schedule_form").reset();
            }   

        }
    });
});
</script>  

<script type="text/javascript">

$.ajax({
 url: 'index.php?route=api/reifenmontage/mark',
 context: document.body,
 success: function(data) {
   const selectControl = $('#button-getdata');
   selectControl.html(data.map(ExtractData).join(''));
 }
});

function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}

</script>

How to change the color of words in jumbotron using the reference $jumbotron?
I am learning web design and js .On my webpage, I define the default color is black in jumbotron h2.
```
.jumbotron h2{
    text-align: center;
    color:black;
}
```
define reference var $jumbotron = $('.jumbotron h2'); while running, I use $jumbotron.html('hellow world'); ...... to display some words and I want to change its color but I do not know how to set new color while running, how to get the color value and assign a new value for my variable $jumbotron? I have tried $jumbotron.color = or $jumbotron.color('') but they are wrong. I have not found any useful answers with google.
OAuth with Passport.js in a multi tenant application
I am working on a website that will allow multiple tenants using subdomains.

Accounts will be able to add their own subdomains, as long as they don't already exist; eg:
```
http://tenant1domain1.mywebsite.com
http://tenant1domain2.mywebsite.com
http://tenant2domain1.mywebsite.com
http://tenant2domain2.mywebsite.com
```
I am also adding in the ability to sign in using a number of oauth providers (google, microsoft, azure ad etc) using passport.js.

All these services will all callback to the main domain (mywebsite.com/login/google/callback) and I need to identify the subdomain of the login request to redirect the user.

As a single user can have multiple subdomains, I can't easily store this against their user record.

I'm running into a problem at the moment where I can't find a way to persist the tenant information past the passport authenticate stage.

I tried using session variables but the session is reset at the callback stage and loses any information I've stored there.

I did think about adding the subdomains as allowed callback urls against each service then just setting the callback to the subdomain but this quickly becomes unmanageable.

Is there any way to make passport.js keep existing session variables intact or to use another method to transfer the tenant information?

React - Infinite looping xhr sockjs-node

I have never hosted a website using react.js (Create-React-App).

I have made this website online but I have not turned on the API.

i don't know why i get auto looping xhr socketjs-nodes like this:

and even though I only entered 1 project using React.js and got Physical Memory Usage almost 600MB is this all because of this xhr?

here is my package.json :

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.12",
    "@fortawesome/free-brands-svg-icons": "^5.6.3",
    "@fortawesome/free-solid-svg-icons": "^5.6.3",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "@material-ui/core": "^3.7.1",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.0",
    "forever": "^0.15.3",
    "history": "^4.7.2",
    "js-cookie": "^2.2.0",
    "jsonwebtoken": "^8.4.0",
    "jwt-decode": "^2.2.0",
    "moment": "^2.23.0",
    "prop-types": "^15.6.2",
    "querystring": "^0.2.0",
    "react": "^16.7.0",
    "react-addons-update": "^15.6.2",
    "react-cookie": "^3.0.8",
    "react-dom": "^16.7.0",
    "react-image-gallery": "^0.8.12",
    "react-images": "^0.5.19",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "react-select": "^2.3.0",
    "react-slick": "^0.23.2",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.7",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "typeface-roboto": "0.0.54"
  },
  "scripts": {
    "start": "PORT=40000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

GraphQL relationship returning null

I'm learning graphql and working on a simple API with mongodb database. I can't figure out why the relationship declared in my schema is not working :

type People {
    id:ID!
    firstName:String!
    lastName:String!
    email:String!
    serviceId:String
    apps:[String]
    service:Service
}
type Service {
    id:ID!
    name:String!
    location:String!
    peoples:[People]
}

When I run this query:

query getLocationByPerson {
   People {
      firstName
      lastName
      service {
        location
      }
   }
}

Here's what I get:

"People": [
      {
        "firstName": "John",
        "lastName": "DOE",
        "service": null
      },
      {
        "firstName": "Jane",
        "lastName": "DOE",
        "service": null
      }
]

Any idea of what I'm missing here?

Related questions

Getting values from http request in nodejs

6 answers

See also questions close to this topic