Vue.js does not support the usage of external JSON files directly within HTML documents

Question

Vue.js does not support the usage of external JSON files directly within HTML documents

I'm encountering issues fetching data from an external JSON file for a specific variable. I suspect that the problem lies in using Vue.js within the HTML, as it seems to be having trouble interpreting my code correctly.:joy: jsfiddle
Additionally, I'm struggling to access values from the JSON file.

new Vue({
        el: '#app',
        data() {
            return {
                searchResult: [],
                search: '',
            }
        },

        created: function() {
            this.searchResult = [
                {
                    "id": 0,
                    "title": "d",
                    "img": "src"
                }
            ];
        },

        computed: {
            filteredName: function() {
                return this.searchResult.filter((x) => {
                    return x.title.match(this.search)
                });
            },
            allOK: function () {
                if (this.search.valueOf() === "") {
                    return false
                } else {
                    return true
                }
            },
            hrefResult: function () {
                return "/item?=" + this.searchResult.id
            }
        }
    });

Does anyone have any suggestions on how to resolve this dilemma? :(

javascript html css json vue.js

Answer 1

Answer №1

The issue lies in utilizing ECMAScript Imports without a module script. The import keyword is only valid within <script type="module">, leading to a syntax error: Unexpected identifier where the import statement exists (attempting to import json/products.json).

There exist a few remedies that necessitate a modern browser (with potential polyfills for older browsers).

Solution 1: Modify your script by adding type="module", and ensure using relative paths in the import pathway. demonstration

<!-- within HTML file -->
<script type="module">
  import products from './json/products.json.js'

  new Vue({
    el: '#app',
    data () {
      return {
        items: products
      }
    }
  })
</script>

Solution 2: Retrieve the external JSON file instead of importing it. demo

<!-- inside HTML file -->
<script>
  (async () => {
    const productsResponse = await fetch('./json/products.json');
    const products = await productsResponse.json();

    new Vue({
      el: '#app',
      data () {
        return {
          items: products
        }
      }
    })
  })();
</script>

Alternatively, consider shifting to vue-cli projects, which feature transpiling in its build, enabling the use of imports for external JSON files. demo

Answer 2

The issue lies in utilizing ECMAScript Imports without a module script. The import keyword is only valid within <script type="module">, leading to a syntax error: Unexpected identifier where the import statement exists (attempting to import json/products.json).

There exist a few remedies that necessitate a modern browser (with potential polyfills for older browsers).

Solution 1: Modify your script by adding type="module", and ensure using relative paths in the import pathway. demonstration

<!-- within HTML file -->
<script type="module">
  import products from './json/products.json.js'

  new Vue({
    el: '#app',
    data () {
      return {
        items: products
      }
    }
  })
</script>

Solution 2: Retrieve the external JSON file instead of importing it. demo

<!-- inside HTML file -->
<script>
  (async () => {
    const productsResponse = await fetch('./json/products.json');
    const products = await productsResponse.json();

    new Vue({
      el: '#app',
      data () {
        return {
          items: products
        }
      }
    })
  })();
</script>

Alternatively, consider shifting to vue-cli projects, which feature transpiling in its build, enabling the use of imports for external JSON files. demo

Vue.js does not support the usage of external JSON files directly within HTML documents

Answer №1

Similar questions

Struggling with serving static content on NodeJS using Express.js

Attempting to implement a smooth fade effect on my image carousel using React-Native

Unable to create circular dots within the Slick Slider widget

The margin 0 auto feature is ineffective, and instead, the target is activated upon the page's initial loading

ng-show and ng-hide toggling for the active row

How to build a Python dictionary from a pandas DataFrame

The useEffect function is not being executed

Ensure that the image within the child div occupies the entire height of the parent div

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Issue: React child components cannot be objects (received: object with keys)

Is the "add" feature malfunctioning?

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

Experiencing difficulties with node and asynchronous programming

Trouble retrieving all rows from mySQL to JSON Object, only receiving the first

Clicking on the element will not cause the body to scroll

Implementing Batch File Uploads using Typescript

Gaining a comprehensive understanding of media queries

Ways to Retrieve JavaScript Variable inside HTML Tags in a JSP

What is the best way to pass a module from the controller to a Jade/Pug template and then use it as an argument in an event handler within the template?

A dynamic modal window built with ReactJS