YAML to JSON (to JS): the easy way!

I’ve recently found a ‘problem’ in my current project with configuration files when I’m trying to refactor some piece of code from PHP to Node.js.

More specifically, I’ve porting an image resizer because PHP library which was doing this job is currently deprecated and, instead of goes to another library, we decided to implement it again using Node.js

The problem was, that PHP library configuration is done using yaml and, our current solution uses a .js file to configure all formats of image resize.

Instead of rewriting all the configuration by hand, I took another approach.

This is how original file looked like:

configuration:
    cache_prefix: files
    source_root: %kernel.root_dir%/../../web
    web_root: %kernel.root_dir%/../../web
    filters:
        original:
            type:    wf_thumbnail
            options: { size: [3000, 2000], mode: inset, quality: 100 }
        #admin
        admin_edit:
            type:    wf_thumbnail
            options: { size: [194, 144], mode: outbound, quality: 75, alignment: 'top middle' }
        admin_dashboard:
            type: wf_thumbnail
            options: { size: [60, 60], mode: outbound, quality: 75, alignment: 'top middle' }
        admin_search_results:
            type:    wf_thumbnail
            options: { size: [75, 75], mode: outbound, quality: 75, alignment: 'top middle' }
        admin_user_avatar:
            type: wf_thumbnail
            options: { size: [100, 100], mode: outbound, quality: 75,  alignment: 'top' }

Convert YAML to JSON

In this step, I used an online tool to convert yaml to a more JS friendly format: JSON.

Transform YAML into JSON - Online YAML Tools

We simply put our YAML in one box and the page shows us the output JSON. With this output, we open developer tools, and access to Console (or Source if you’re on chrome) and paste it, assigning to a variable:

let data = <paste here your JSON>

Once you’ve loaded your data in a variable, you can manipulate to get your output result.

In my case, I also need to transform ‘a little’ the data to fit into my structure.

[{
  paths: [],
  width: 640,
  height: 480,
  ignoreFP: false
},
...
]

To do that, nothing better that filter and map methods.

let output = Object.keys(data.configuration.filters)
        .filter(k => data.configuration.filters[k].type === 'wf_thumbnail')
        .map(k => {
            let item = data.configuration.filters[k]
            return {
                paths: [
                    `files/${k}/files/fp`,
                    `files/${k}`,
                ],
                width: item.options.size[0],
                height: item.options.size[1],
                ignoreFP: false
            }
        })

In my case, I’m transforming from original data to an array of objects of the above type.

The last step is to get out of our data to a JS file. To do this, right click on the object from the console, and select “Copy Object”

Then, paste it into a new .js file and voilà! You’ve your JS file without rewriting it.

[
  {
    "paths": [
      "files/original/files/fp",
      "files/original"
    ],
    "width": [
      3000,
      2000
    ],
    "ignoreFP": false
  },
  {
    "paths": [
      "files/admin_edit/files/fp",
      "files/admin_edit"
    ],
    "width": [
      194,
      144
    ],
    "ignoreFP": false
  },
  {
    "paths": [
      "files/admin_dashboard/files/fp",
      "files/admin_dashboard"
    ],
    "width": [
      60,
      60
    ],
    "ignoreFP": false
  },
.....
]

Links:

• YAML to JSON
• JavaScripts basics (part 1) in Spanish