How to read local json data file and render to page

Preface

Uni-app can read local json data files in the following two ways:

• File suffix is ​​of type .json
• File suffix is ​​of type .js

Specific demonstration code

1. The file suffix is ​​of type.json

For non-H5-end, this type of file can only be imported using require, and it will be an object type after importing. import cannot import json file.

① Create a new directory data in the project root directory.

② In the data directory, create a new file and write the local simulated json data. Note that the file suffix is ​​json.

// 
// Must be in the "" format, otherwise an error will be reported[
  {"id":"1","city":"Shenzhen"}, {"id":"2","city":"Guangzhou"}
]

③Introduce and use it on the page.

<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>
 
<script>
  const cityData = require('@/data/')
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      ('cityJson:'+(cityData));
      //=>cityJson:[{id:'',city:''},{id:'',city:''}]
    }
  }
</script>

On the H5 side, you can introduce jq and use jq's AJAX to read the local json file.

$.getJSON('../../data/').then((res)=>{
  ('cityJson:'+(res));
});
//=>cityJson:[{id:'',city:''},{id:'',city:''}]

2. The file suffix is ​​.js type

Write json data in js file and export using export. Import in the required page by import method, import cannot import json files. Implementation is as follows:

① Create a new directory data in the project root directory.

② In the data directory, create a new file, note that the file suffix is ​​js.

③ Write local simulated json data on the page and export it.

④Introduce and use on the page.

Method 1

// 
const cityData = [
  {id:'1',city:'Shenzhen'}, {id:'2',city:'Guangzhou'},
]
 = {
  cityData: cityData
}
 
 
// 
<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>
 
<script>
  import data from "@/data/"
  export default {
    data() {
      return {
        localData: 
      }
    },
  }
</script>

Method 2 (recommended)

// 
const cityData = [
  {id:'1',city:'Shenzhen'}, {id:'2',city:'Guangzhou'},
]
function refresh(){
 return ''
}
export {
  cityData,
  refresh
}
 
// 
<template>
  <view v-for="item in localData">
    <text>{{}}</text>
  </view>
</template>
 
<script>
  import {cityData, refresh} from "@/data/"
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      (refresh())
      ((cityData))
    },
  }
</script>

Things to note

() cannot read local js files and json files. jq can be read, but jq can only be introduced and used on the H5 side.

Summarize

This is the article about how uni-app reads local json data files and renders them to the page. For more related uni-app to read local json data files, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!