Как вставить данные JSON из URL в ListView в NativeScript-Vue

Question

У меня проблема с вставкой данных JSON из API в ListView. Вот ссылка API: https://webservicevsid.com/API/GetEvent.php

Я использую NativeScript-Vue для этого проекта

Answer 1

Вы можете просто использовать axios или Http модуль, чтобы поразить API и загрузить ответ в виде списка.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ListView for="item in listOfItems" class="list-group">
            <v-template>
                <!-- Shows the list item label in the default color and style. -->
                <Label :text="item.nama_event" class="list-group-item" />
            </v-template>
        </ListView>
    </Page>
</template>

<script>
    const axios = require("axios");

    export default {
        data() {
            return {
                listOfItems: []
            };
        },
        mounted: function() {
            axios
                .get("https://webservicevsid.com/API/GetEvent.php")
                .then(response => {
                    this.listOfItems = response.data;
                });
        }
    };
</script>

Образец игровой площадки

Answer 2

Вам нужно использовать что-то вроде Ajax, jQuery или Axios для извлечения данных. Здесь является примером того, что вы ищете с Axios. В основном, включите скрипт со ссылкой на внешний файл, который может обрабатывать эту логику.

index.html

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

тогда, на ваш взгляд, включите что-то вроде ...

mounted() {
  axios.get("https://webservicevsid.com/API/GetEvent.php")
  .then(response => {this.results = response.data.results})
}

Я не слишком знаком с NativeScript, но этот может быть больше, чем вы ищете ...

<script>
  import axios from "axios";
  export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    axios({ method: "GET", "url": 
    "https://webservicevsid.com/API/GetEvent.php" }).then(result => {
      this.data = result.data.results;
    }, error => {
      console.error(error);
    });
  }
};
</script>