Guide on integrating JSON/YAML file into Gridsome

Question

Guide on integrating JSON/YAML file into Gridsome

I am currently working on developing a Gridsome application that will interact with JSON or YAML files.

My goal is to extract data from files located in the "./data/" folder within Vue components and integrate it into the GraphQL data layer. Essentially, I aim to expose data from these files through GraphQL.

profile.json

{
    "name": "Lorem"
}

config.json

{
    "layout": "default",
    "theme": "blue"
}

I envision accessing the "name" value like this:

$page.data.profile.name
$page.data.config.theme

Alternatively,

$data.profile.name
$data.config.theme

Do I need to use @gridsome/source-filesystem and @gridsome/transformer-json plugins for this task? Or should I consider manually adding the 'Data' collection in the server and creating a new node for each file?

I have experimented with both approaches, but when exploring the GraphQL API, I encountered an error: "Unexpected token < in JSON at position 0."

Thank you!

javascript vue.js gridsome

Answer 1

Answer №1

To include local files, follow these steps:

import temperatures from '~/data/four.json'
import east from '~/data/east.json'
import southwest from '~/data/southwest.json'
import whd from '~/data/whd.json'
import thirteen from '~/data/thirteen.json'

export default {
  data () {
    return {
      temperatures,
      east,
      thirteen,
      whd,
      southwest,
    }
  },

I created a data folder within the pages directory to store the files. You can then reference them in the script tag and retrieve them using a return function.

In your template section, you would display it like this:

<template>
<div>
 {{ temperatures }}
</div>
</template>

Answer 2

To include local files, follow these steps:

import temperatures from '~/data/four.json'
import east from '~/data/east.json'
import southwest from '~/data/southwest.json'
import whd from '~/data/whd.json'
import thirteen from '~/data/thirteen.json'

export default {
  data () {
    return {
      temperatures,
      east,
      thirteen,
      whd,
      southwest,
    }
  },

I created a data folder within the pages directory to store the files. You can then reference them in the script tag and retrieve them using a return function.

In your template section, you would display it like this:

<template>
<div>
 {{ temperatures }}
</div>
</template>

Guide on integrating JSON/YAML file into Gridsome

Answer №1

Similar questions

Issue with jQuery .on('change') function not functioning correctly following a row being duplicated

Organizing data with JavaScript: Transforming a flat array into nested JSON structures

Node unable to interpret accented characters from CSV file input

Trouble with jQuery script causing initial word count issue in textarea upon page load

Determine the Placement of Bootstrap Popover by Utilizing SVG and Mouse Coordinates

Exploring the power of regular expressions in Javascript

Using AJAX to dynamically edit and update PHP data

Insert Angular HTML tag into TypeScript

What is the best way to compare two arrays of objects and then append a new key to the objects in the second array?

Ways to incorporate lighting into the instancing shader

What could be the reason for the Mongoose findAll function causing a 500 error to occur?

A glitch occurred while attempting to load content dynamically onto an HTML page using Ajax

How can I access an array option that combines both global and target-specific specifications within a grunt plugin?

When a checkbox is within a container that contains images, it will trigger the event twice

The error "Call to a member function exports() on array" occurs when attempting to use the

Is there a way to streamline and optimize this React/Material UI code for faster performance?

Having trouble with adding a class on scroll?

Execute a virtual mouse click on a button without the need for a physical click

Transforming Google Maps from using jQuery to AngularJS

Creating a spherical shape using random particles in three.js