Load and parse JSON data in VueNative App – VueMenu

L

This tutorial will teach you how to load and parse JSON data in VueNative based applications. You will create a small application which will display Sodexo’s weekly menu in your app.

Purpose and learning process

In this exercise you will learn how to use Vue Native to build mobile app.

  • using and rendering build-in components
  • creating and rendering an own components
  • understand state and props
  • passing data between components
  • styles

Example screenshots

Application will load Sodexo’s week menu.

Install node

You will need to install NodeJS before you can create React Native projects. You can find Node here: https://nodejs.org/en/download/.

Install Expo CLI

This exercise will use Expo to create React Native application. You will need to install Expo CLI command line utility. You can follow these instructions Expo Getting Started or commands below.

npm install -g expo-cli

Create a new project

Create a new Vue Native project called “Sodexo”

vue-native init Sodexo

Run project

To get started go to your project folder and start development server.

cd Sodexo
npm start

Now your development server should be running and ready. You can launch Android Emulator and run your app in there or launch Expo app in your device and scan QR code to open app.

Load JSON data

You can find Sodexo’s JAMK Ravintola Bittipannu menu from here

Scroll down and you can find “Tilaa lista” selection, which displays “Viikon lista JSON”. JSON is offerent from following URL

You can also use http://ptm.fi/materials/sodexo.json, if you can’t find live data from Sodexo.

Get familiar with the structure of returned JSON:

Load JSON to Vue App

Add a new script element to your App.vue. You can use beforeMount function, which is one of those Vue lifecircle methods. Create own getSodexoData method, which will be called from beforeMount. Now application will start loading JSON automatically, when app is launched.

Use fetch to load JSON data from Sodexo and define titletimeperiodmealdates and loading variables to store loaded data.

<script>
export default {
  name: "Sodexo",
  data() {
    return {
      title: '',
      timeperiod: '',
      mealdates: [],
      loading: true
    };
  },
  methods: {
    getSodexoData() {
      fetch("https://www.sodexo.fi/ruokalistat/output/weekly_json/127")
        .then(response => response.json())
        .then(data => {
          this.title = data.meta.ref_title,
          this.timeperiod = data.timeperiod,
          this.mealdates = data.mealdates
        });
        this.loading = false
    }
  },
  beforeMount(){
    this.getSodexoData()
 },
};
</script>

Show loaded JSON data

Modify App.vue to render loaded JSON data (now only title and timeperiod). v-if is used to conditional rendering. loading is true by default. So, application will render only “Ladataan…” text, when application is launched. Loaded menu will be rendered in a scroll-view after loading is finished. There are no any error checking now…. you can make this better!

<template>
  <view class="container">
    <view v-if="loading"><text>Ladataan...</text></view>      
    <scroll-view  v-if="!loading">
      <view class="sodexo">
        <text class="title">{{title}} {{timeperiod}}</text>
      </view>
    </scroll-view>
  </view>
</template>

Modify styles

Modify App.vue styles.

<style>
.container {
  align-items: center;
  justify-content: center;
  flex: 1;
  margin-top: 30;
}
.sodexo {
  align-items: center;
}
.mealdates {
  align-items: flex-start;
}
.title {
  color: gray;
  font-size: 20px;
}
</style>

Test

Save and test your application. It should now display title “JAMK ravintola Bittipannu” and timeperiod.

MealDateItem

Add a new Vue file MealDateItem.vue to your project. This component will be used to show one day menu in the App. Now this component will only show a date, more information will be added later. You will get JSON item here via props.

<template>
  <view class="container">
    <text class="date">{{item.date}}</text>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      Type: Object
    }
  }
};
</script>

<style>
  .container {
    margin: 10;
  }
  .date {
    color:coral;
    font-size: 20px;
  }
</style>

Add MealDateItem’s in App

Modify your App.vue to use created MealDataItem‘s. You need to import it and define a new component.

<script>
import MealDateItem from "./MealDateItem"

export default {
  name: "Sodexo",
  components: {
    MealDateItem
  }
  ...
</script>

Modify App rendering to use MealDateItem‘s. You can use mealDate-item and loop through all the mealdates. Each mealdate items will send be to MealDateItem.

<template>
  <view class="container">
    <view v-if="loading"><text>Ladataan...</text></view>        
    <scroll-view  v-if="!loading">
      <view class="sodexo">
        <text class="title">{{title}} {{timeperiod}}</text>
        <view class="mealdates">
          <mealDate-item
            v-for="mealdate in mealdates"
            :key="mealdate.date"
            :item="mealdate"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template<

Test

Save and test. Your app should now display a title and menu dates.

MealItem

Add a new Vue file MealItem.vue to your project. This component will be used to show one meal in MealDateItem component. Data will passed here via props and only categorytitle_fi and price values from JSON will be rendered.

<template>
  <view class="container">
    <text class="category">{{item.category}}</text>
    <text>{{item.title_fi}}</text>
    <text>{{item.price}}</text>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      Type: Object
    }
  }
};
</script>

<style>
  .container {
    margin: 5;
  }
  .category {
    color:gray;  
  }
</style>

Add MealItem’s in MealDataItem

Modify your MealDataItem.vue to use created MealItem‘s. You need to import it and define a new component. This component will get data via props and you need to pass loaded meal courses to MealItem components. Now this is done via meals.

<script>
import MealItem from "./MealItem"

export default {
  components: {
    MealItem
  },
  props: {
    item: {
      Type: Object
    }
  },
  data() {
    return {
      meals: this.item.courses
    };
  }
};
</script>

Modify MealDataItem rendering to use MealItem‘s. You can use meal-item and loop through all the meals. Each meal items will send to MealItem.

<template>
  <view class="container">
    <text class="date">{{item.date}}</text>
    <meal-item
      class="text-container"
      v-for="meal in meals"
      :key="meal.title_fi"
      :item="meal"
    />
  </view>
</template>

Test

Your app should now work. Modify some styles and make it look better and unique.

Deploying the application on Android

The final step in this tutorial is to deploy the application to the Android. First, you will need to update app.json to include Android specific properties. Open the app.json file and update the file to include the android field:

{
  "expo": {
    ...
    "android": {
      "package": "com.example.sodexo",
      "versionCode": 1
    }
  }
}

The android.package field is a unique value that will represent your package in the app store. After updating the file, run the expo build:android command.

expo build:android -t apk

Download and install apk to emulator or device (just drag and drop APK to emulator). Now your app doesn’t have correct icons etc.. you can learn to create those by yourself.

Add comment

Pasi Manninen

Pasi Manninen

Pasi is a mobile and web application developer. Currently working as a senior lecturer in JAMK University of Applied Sciences. Pasi has programming experience over many decades and has taught dozens of courses since the 90's.

Recent Posts

Follow Me