Display, in Vue app template, data fetched from API, using ASYNC/AWAIT (Nativescript playground)

Question

this seems it should be trivial, but I've chased it for 3 weeks.

I want to fetch data from my API, and display it in the Vue template I borrowed from the NativeScript.org Playground weather example.

And, I wish to use ASYNC/AWAit, as it seems more elegant.

    <template>
    <Page class="Page" actionBarHidden="true" backgroundSpanUnderStatusBar="true">
<StackLayout>
    <StackLayout row="0">
      <Image class="event-image" :src="eventImage" />
      <Label class="bold" :text="exported_event0" backgroundColor="gray"></Label>
      <Label class="bold" :text="created_event1" backgroundColor="gray"></Label>
      <Label class="bold" :text="created_event2" backgroundColor="gray"></Label>
    </StackLayout>
</StackLayout>
    </Page>
</template>

<script>
    const httpModule = require("http");
    var exported_event0;
    var exported_event1;
    var exported_event2;
    var created_event1;
    var created_event2;
    var fetched_event;


    export default {
        data() {
            return {
                exported_event0: "A string of a returned event",
                exported_event1: created_event1,
                exported_event2: created_event2,
            };
        },
        created() {
            this.eventImage = "~/images/augustus.jpg";
            this.created_event1 = "A stringy created event";
            this.created_event2 = getEvent().then(result => console.log(result));
            console.log("created_event2 is:" + this.created_event2);
      },
        };
      async function getEvent() {
            console.log("-----httpmodule ----------------------------");
            let fetched_event = await httpModule.getJSON("https://agile-brushlands-36817.herokuapp.com/events/4.json").then(function(result) {
              console.log("---------Event api fetched." + JSON.stringify(result));
              }, function(error) {
                 console.error("the GETJSON eror" + JSON.stringify(error));
            });
            console.log("---------Event api fetched." + JSON.stringify(fetched_event));
          return fetched_event;
        };
</script>

1) Can/should the export | data | created approach (from the template) be simplified?

2) How to make the getEvent() call wait for the data to be fetched?

Here's the (abbreviated) log:

'-----httpmodule ----------------------------'
'---------Event api fetched.{"id":4,"title":"The armies of Richard I and Saladin fight it out in the Holy Land. Richard gets Arsuf; Saladin keeps Jerusalem.","year":1191,"position":null,"wikip":"http://en.wikipedia.org/wiki/Saladin#Third_Crusade","image":"","created_at":"2019-01-29T16:48:02.248Z","updated_at":"2019-01-29T16:48:02.248Z","url":"https://agile-brushlands-36817.herokuapp.com/events/4.json"}'
 '---------Event api fetched.undefined'
  CONSOLE LOG undefined

You do use async/await if you don't like the promise chain. If you are using promise chain, you don't need async/await. You have created_event1 as variable, it's not a member of your class.So this.created_event1 might not have any effect. — Manoj
– Manoj, Commented Feb 22, 2019 at 21:56
Manjo, thanks, and I'm glad I left the excess code in. If I remove this from this.created_event1, it no longer displays "A stringy created event" in the app. — Ed Jones
– Ed Jones, Commented Feb 22, 2019 at 22:05
Are you saying that I have used elements of the promise chain here when I shouldn't have? I am new to all of this. — Ed Jones
– Ed Jones, Commented Feb 22, 2019 at 22:06

aalcutt · Accepted Answer · 2019-02-23 04:31:31Z

1

When using async/await you don't need to use promises. You can update your getData function to properly use await and return the result

async function getEvent() {
    try{
        console.log("-----httpmodule ----------------------------");
        let result = await httpModule.getJSON("https://agile-brushlands-36817.herokuapp.com/events/4.json");
        console.log("---------Event api fetched." + JSON.stringify(result));
        return result;
    }
    catch(error){
         console.error("the GETJSON eror" + JSON.stringify(error));
    }
}

Then you will want to make sure your created hook is also async so you can use the await keyword in it while calling getData

async created() {
    this.eventImage = "~/images/augustus.jpg";
    this.created_event1 = "A stringy created event";
    this.created_event2 = await getEvent();
    console.log("created_event2 is:" + this.created_event2);
},

answered Feb 23, 2019 at 4:31

aalcutt

3001 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ed Jones Over a year ago

Thank you!! I had to add "JSON.stringify() to the last line to get it to log, and I still don't have the thing displaying properly in the view (vue?). but it did log created_event2 properly. And it looks clean and elegant.

Ed Jones Over a year ago

OK, I'd forgotten or didn't know this, but it caused me no end of trouble in debugging this. You can't log a string and an object. 'console.log("created_event2 is:" + this.created_event2);' will not work. console.log("created_event2 is:"); console.log( this.created_event2);' will

Collectives™ on Stack Overflow

Display, in Vue app template, data fetched from API, using ASYNC/AWAIT (Nativescript playground)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related