Importing JSON data to Storyblok using API
Tags: webdev, storyblok, vue, nuxt
Published: 2022-06-01 14:59:31

### Using **Storyblok Management API**

The Storyblok Management API is organized around REST. Our API has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors. We use built-in HTTP features, like HTTP query parameters and HTTP verbs, which are understood by off-the-shelf HTTP clients. We support cross-origin resource sharing, allowing you to interact securely with our API from a client-side web application (though you should never expose your secret API key in any public website's client-side code). JSON is returned by all API responses, including errors, although our API libraries convert responses to appropriate language-specific objects.


**Stories** 
The stories endpoint will let you manage all content entries of your Storyblok space. You can use it to import, export or modify content.

You can create Story using REST API

```
Storyblok.post('spaces/606/stories/', {
  "story": {
    "name": "Story Name",
    "slug": "story-name",
    "content": {
      "component": "page",
      "body": []
    }
  },
  "publish": 1
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})
```

For example Above coding using Javascript.

You can also do with CURL easily

Something like this.
```
curl "https://mapi.storyblok.com/v1/spaces/606/stories/" \
-X POST \
-H "Content-Type: application/json" \
-H "Authorization: YOUR_OAUTH_TOKEN" \
-d "{\"story\":{\"name\":\"Story Name\",\"slug\":\"story-name\",\"content\":{\"component\":\"page\",\"body\":[]}},\"publish\":1}"
```
 
You also create, update, delete components. E.g this below to create component in Storyblok using API

```
Storyblok.post('spaces/656/components/', {
  "component": {
    "name": "teaser",
    "display_name": "Teaser",
    "schema": {
      "title": {
        "type": "text",
        "pos": 0
      },
      "image": {
        "type": "image",
        "pos": 1
      }
    },
    "is_root": false,
    "is_nestable": true
  }
}).then(response => {
  console.log(response)
}).catch(error => { 
  console.log(error)
})
```

### Let's read JSON file and import to Storyblok.
I use nodejs for import, So First make sure to install the package
`yarn add storyblok-js-client` or `npm i storyblok-js-client`

then 
`const StoryblokClient = require('storyblok-js-client')`



```
// Initialize the client with the oauth token
const Storyblok = new StoryblokClient({
  oauthToken: '<yourPersonalToken>', // can be found in your My account section
})
```

Add Storyblok config

```
const config = {
  spaceId: '<SpaceId', // can be found in the space settings.
  parentFolder: '<parentFolder>', // navigate into your folder and copy the id from the URL at app.storyblok.com <- last one
}
```

Then

Read the json file using `fs` module.
make sure to `createReadStream` incase the json file is large.

```
const data = fs.createReadStream('data.json')

```


```
data
  .on('data', function (data) {{
     data = JSON.parse(data)
     Object.entries(data).forEach(([key, value]) => {
     const story = {
        slug:value.slug,
        name: value.name,
        parent_id: config.parentFolder,
        content: {
          component: 'partner',
          name: value.name,
          description: value.content.en,
          description__i18n__de: value.content.de // if you have i18n.
       }

   

   Storyblok.post(`spaces/${config.spaceId}/stories/`, {
        story,
      })
        .then((res) => {
          console.log(`Success: ${res.data.story.name} was created.`)
        })
        .catch((err) => {
          console.log(`Error: ${err}`)
        })
    })
  })
})
```