|
|
@@ -0,0 +1,92 @@
|
|
|
+var request = new XMLHttpRequest()
|
|
|
+var selects = document.querySelector('.selects');
|
|
|
+var weatherDiv = document.querySelector('.weather');
|
|
|
+request.open('GET', 'https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json', true) // последний параметр указывает на синхронность или асинхронность запроса. В данном случае запрос асинхронный
|
|
|
+
|
|
|
+
|
|
|
+request.onreadystatechange = function(){ //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
|
|
|
+ if (request.readyState != 4){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (request.status == 200){
|
|
|
+ var object = JSON.parse(request.responseText);
|
|
|
+
|
|
|
+
|
|
|
+ var keys = Object.keys(object);
|
|
|
+ var select = document.createElement("select");
|
|
|
+ for (var i = 0; i < keys.length; i++) {
|
|
|
+ var option = document.createElement("option");
|
|
|
+ option.innerHTML = keys[i];
|
|
|
+ option.value = keys[i];
|
|
|
+ select.appendChild(option);
|
|
|
+ }
|
|
|
+ select.onchange = function(e){
|
|
|
+ console.log(this.value)
|
|
|
+ var select = document.createElement("select");
|
|
|
+ for (var i = 0; i < object[this.value].length; i++) {
|
|
|
+ var option = document.createElement("option")
|
|
|
+ option.innerHTML = object[this.value][i];
|
|
|
+
|
|
|
+
|
|
|
+ select.appendChild(option);
|
|
|
+
|
|
|
+ }
|
|
|
+ if(selects.children.length > 1){
|
|
|
+ selects.replaceChild(select, document.getElementById("main").nextElementSibling);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ selects.appendChild(select);
|
|
|
+ select.onchange = function(){
|
|
|
+
|
|
|
+ request.open('GET', "https://query.yahooapis.com/v1/public/yql?" + 'q=' + encodeURIComponent("select * from weather.forecast where woeid in (select woeid from geo.places(1) where text=\'" + this.value + "\') and u='c'") + '&format=json', true);
|
|
|
+ console.log(this.value)
|
|
|
+ request.onreadystatechange = function(){
|
|
|
+ if(request.readyState === 4 && request.status === 200){
|
|
|
+ console.log(JSON.parse(request.responseText));
|
|
|
+ var obj = JSON.parse(request.responseText);
|
|
|
+
|
|
|
+ var weather = obj.query.results.channel.item.description;
|
|
|
+
|
|
|
+ var resWeather = weather.replace(/href|CDATA|[\!]|[\[]|[\]]/g,"");
|
|
|
+ var resWeather2 = resWeather.slice(1,resWeather.length - 1);
|
|
|
+ var resWeather3 = resWeather2.replace(/Full Forecast at Yahoo Weather/g,"");
|
|
|
+ var resWeather4 = resWeather3.slice(0,resWeather3.length - 28);
|
|
|
+ weatherDiv.innerHTML = resWeather4;
|
|
|
+ console.log(resWeather4)
|
|
|
+ // var resObj = obj.query.results;
|
|
|
+ // var keys = Object.keys(resObj);
|
|
|
+ // var table = document.createElement("table");
|
|
|
+ // for (var i = 0; i < keys.length; i++) {
|
|
|
+ // var tr = document.createElement("tr");
|
|
|
+ // var td1 = document.createElement("td");
|
|
|
+ // var td2 = document.createElement("td");
|
|
|
+ // td1.innerHTML = keys[i];
|
|
|
+ // td2.innerHTML = resObj[keys[i]];
|
|
|
+ // tr.appendChild(td1);
|
|
|
+ // tr.appendChild(td2);
|
|
|
+ // table.appendChild(tr);
|
|
|
+ // }
|
|
|
+ // document.body.appendChild(table);
|
|
|
+ }
|
|
|
+ else if(request.readyState > 1 && request.readyState < 4){
|
|
|
+ weatherDiv.setAttribute("heigt", "400px")
|
|
|
+ weatherDiv.innerHTML = "loading...";
|
|
|
+ }
|
|
|
+ else if(request.status === 400){
|
|
|
+ weatherDiv.innerHTML = "error 400";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ request.send();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ selects.appendChild(select);
|
|
|
+ select.id = "main"
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ alert('shit happens: ' + xhr.status + ', ' + xhr.statusText );
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+request.send()
|
