0

I am beginner in web development. I am using vue-cli3.0 and local server.

<template>
    <div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})

export default class Test extends Vue 
{
  mounted(){
      this.readJson("./resources/doc.json")
  }

    readJson(filePath) {
        var request = new XMLHttpRequest();
        request.open("GET",filePath, false);
        console.log(request)
        // request.send(null)
        // var my_JSON_object = JSON.parse(request.responseText);
        // alert (my_JSON_object.result[0]);
    }
}
</script>

When I console.log(request) , inside of request is like this.

XMLHttpRequest {onreadystatechange: null, readyState: 1, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} onabort: null onerror: null onload: null onloadend: null onloadstart: null onprogress: null onreadystatechange: null ontimeout: null readyState: 1 response: "" responseText: "" responseType: "" responseURL: "" responseXML: null status: 0 statusText: "" timeout: 0 upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …} withCredentials: false proto: XMLHttpRequest

They are all null.

Please help me.

I can't write import here.

So I don't want to use import.


Thank you for a answer.

<template>
    <div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})

export default class Test extends Vue 
{
  mounted(){
      this.readJson(require("./resources/doc.json"))
  }

    readJson(filePath) {
        var request = new XMLHttpRequest();
        request.open("GET",filePath, false);
        console.log(request)
        request.send(null)
        var my_JSON_object = JSON.parse(request.responseText);
        alert (my_JSON_object.result[0]);
    }
}
</script>

I changed my code like this.

But inside request is still same.

error

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in mounted hook: "SyntaxError: Unexpected token < in JSON at position 0"


But I found that inside "filePath.ngldoc" there were data! Is this data javascript object?

3
  • 1
    I assume ./resources/doc.json exists relative to your the .vue file you shared here? Commented Oct 16, 2018 at 4:30
  • See if this helps: stackoverflow.com/a/45566350/8284987 Commented Oct 16, 2018 at 4:32
  • Also it might be helpful to log the contents of request.responseText. Commented Oct 16, 2018 at 4:34

1 Answer 1

0

You should probably use this.readJson(require("./resources/doc.json")).

See the vue-cli dos on static asset handling for a detailed explanation of your available options.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.