This is just a simple template to check if are fetching the JSON data correctly. #5 Display the Raw JSON Data on the Web PageĪdd this in the template section of the weather.vue file: // weather.vue Just replace “weather.json” with the API URL. This also returns a promise, so we need to chain a new then method to get the JSON data that we want.Įven though we are fetching the data from a file, we do the exact same thing when fetching data from an URL. With the fetch API we need to call the json() function which reads the response to the completion. This returns a promise and we are using the then function to handle the response. Here we use the fetch API to fetch the data from the JSON file. Then create a method called getWeatherData. We will fill this variable with the data from the JSON file. We have created a variable called weatherDataList. then(data => (this.weatherDataList = data))
#Vue download file from api code#
Add the file into the root of the public folder of your project.Ĭhange the code in the script section in Weather.json to look like this: weather.jsonĬopy the JSON content in a file called weather.json. We will be using a simple JSON file for fetching the data. Let’s get started fetching our weather data. When we save our files, our local server should reload and show us this web page: #4 Get the Weather Data from the Local JSON File In the script tag, we removed the HelloWorld component and replaced it with our Weather component. In the template tag, we removed all the HTML within the div tag and replaced it with our Weather component. We have only changed the code within the template tag and the script tag. Import Weather from './components/Weather.vue'įont-family: 'Avenir', Helvetica, Arial, sans-serif In the App.vue file, we have changed the code to this: // App.vue Here we have created a simple component displaying a header tag with “My Weather App”. In the components folder, create a new file called Weather.vue and add this code: // Weather.vue The project folder should look something like this: No need to waste valuable seconds refreshing the site manually :). This means that every change you do in the project, it will reflect those changes in the GUI. npm run serveĪs you can see in the terminal, the CLI has started up a local server on “ Open a new tab on your browser and enter this URL.
Use the npm run serve command to start a local web server.
Go into the folder by typing this in the command: cd weather-json
Now we have created a basic Vue CLI project called weather-json. #2 Run the Vue CLI Starter App in the Browser You will then have the option to select a preset.
#Vue download file from api install#
npm install -g the CLI is installed, create the Vue app by using the create command. Install the CLI by typing the following in a terminal. In other to use the Vue CLI, you need to download and install Node.js. 8 Final Words #1 Create the Project with the Vue CLI
0 kommentar(er)
