Hello community back to you again. I am playing with the openweather API and i am building a simple weather app. I have an issue and i can't show the weather conditions icon for each city.
I pushed every icon id in a newArray and i am trying to show it using the url but without luck http://openweathermap.org/img/w/10d.png
Any suggestion?Thanks in advance
var app = new Vue({
el: "#app",
data: {
test: [],
image: [],
newArray:[],
message: "",
url: "",
},
created: function () {
this.getData();
this.cities();
},
methods: {
getData: function () {
var fetchConfig =
fetch("https://api.myjson.com/bins/i8run", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.test = json.list;
console.log(app.test);
app.pushAnArr();
})
.catch(function (error) {
console.log(error);
})
},
cities: function () {
var fetchConfig =
fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.image = json.hits;
console.log(app.image);
})
.catch(function (error) {
console.log(error);
})
},
pushAnArr: function(){
for(var i=0; i<app.test.length; i++){
app.newArray.push(app.test[i].weather[0].icon);
}
console.log(app.newArray);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<div v-for="item in newArray" :key="item.id" class="thecard">
{{item}}
<img src="http://openweathermap.org/img/w/item.png" >
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>You can't use curlies {{item}} in attributes.
Use:
<img v-bind:src="'http://openweathermap.org/img/w/' + item + '.png' " />
var app = new Vue({
el: "#app",
data: {
test: [],
image: [],
newArray:[],
message: "",
url: "",
},
created: function () {
this.getData();
this.cities();
},
methods: {
getData: function () {
var fetchConfig =
fetch("https://api.myjson.com/bins/i8run", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.test = json.list;
console.log(app.test);
app.pushAnArr();
})
.catch(function (error) {
console.log(error);
})
},
cities: function () {
var fetchConfig =
fetch("https://pixabay.com/api/?key=10772849-8270b213e517e422b036ea0fd&q=city", {
method: "GET",
headers: new Headers({})
}).then(function (response) {
if (response.ok) {
return response.json();
}
}).then(function (json) {
console.log("My json", json)
app.image = json.hits;
console.log(app.image);
})
.catch(function (error) {
console.log(error);
})
},
pushAnArr: function(){
for(var i=0; i<app.test.length; i++){
app.newArray.push(app.test[i].weather[0].icon);
}
console.log(app.newArray);
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<div v-for="item in newArray" :key="item.id" class="thecard">
{{item}}
<img v-bind:src="'http://openweathermap.org/img/w/' + item + '.png' " />
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>