CODEWITHSUNDEEP
javascriptvue.jscallback
Sock Monkey
Sock Monkey

Reputation: 333

How to assign variable in callback?

I'm having some trouble assigning dat.id that I recieve in a callback to my AccuprobeID variable which I use to make another API call later on. Any Help would be appreciated. I tried changing sap.deviceInfo(callback) to sap.deviceInfo().then(res=>{}) but that didn't work :/

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code
        console.log(this.claimCode)})
    },
    addClaim(claimCode,AccuprobeID){ 
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         AccuprobeID=dat.id
         return AccuprobeID
      };
        sap.setClaimCode(claimCode,callback);
        function callback(err, dat) {
          if(err) { throw err; }
          }
          this.claimCodeSet=true
        },
      claimDeviceToProduct(AccuprobeID){
        console.log(AccuprobeID)
        particle.addDeviceToProduct({product:'2121', deviceId: AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
          console.log('device claim data:', data);
        }, function(err) {
          console.log('device claim err:', err);
        });
      },
  }}
</script>

Upvotes: 0

Views: 90

Answers (2)

BTL
BTL

Reputation: 4656

You need to use the AccuprobeID that you have declared in data. And to use it you need to do this.AccuprobeID.

Here is the code : 

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code;
        console.log(this.claimCode)})
    },
    addClaim(claimCode){
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         this.AccuprobeID=dat.id;
      };
      sap.setClaimCode(claimCode,callback);
      function callback(err, dat) {
        if(err) { throw err; }
        }
      this.claimCodeSet=true;
    },
    claimDeviceToProduct(){
      console.log(this.AccuprobeID)
      particle.addDeviceToProduct({product:'2121', deviceId: this.AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
        console.log('device claim data:', data);
      }, function(err) {
        console.log('device claim err:', err);
      });
    },
  }}
</script>

Upvotes: 0

王仁宏
王仁宏

Reputation: 396

Vue Access local data by using this.data_name

you need new variable ref to this outside, because this in callback function ref to global.

addClaim(claimCode){
 var self = this;
 sap.deviceInfo(function callback(err, dat) {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   self.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, function callback(err, dat) {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

otherwise, use arrow function to access this directly.

addClaim(claimCode){
 sap.deviceInfo((err, dat) => {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   this.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, (err, dat) => {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

javascript-variable-scope-this

Upvotes: 1

Related Questions