# st.js

**Repository Path**: neequ/st.js

## Basic Information

- **Project Name**: st.js
- **Description**: JSON template over JSON
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-06
- **Last Updated**: 2024-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# st

JSON Selector + Transformer

- Website: [https://selecttransform.github.io/site](https://selecttransform.github.io/site)
- Twitter: [@selecttransform](https://www.twitter.com/selecttransform)

---

![preview](https://gliechtenstein.github.io/images/st.gif)

1. **Select:** Query any JSON tree to select exactly the subtree you are looking for.
2. **Transform:** Transform any JSON object to another by parsing with a template, also written in JSON

You can also mix and match Select AND Transform to perform partial transform, modularize JSON objects, etc.

# Features

## 1. Select

Select a JSON object or its subtree that matches your criteria

> Step 1. Take any JSON object

```js
var data = {
  "links": [
    { "remote_url": "http://localhost" },
    { "file_url": "file://documents" },
    { "remote_url": "https://blahblah.com" }
  ],
  "preview": "https://image",
  "metadata": "This is a link collection"
}
```

> Step 2. Find all key/value pairs that match a selector function

```js
var sel = st.select(data, function(key, val) {
  return /https?:/.test(val);
})
```

> Step 3. Get the result

```js
var keys = sel.keys();
//  [
//    "remote_url",
//    "remote_url",
//    "preview"
//  ]

var values = sel.values();
//  [
//    "http://localhost",
//    "https://blahblah.com",
//    "https://image"
//  ]

var paths = sel.paths();
//  [
//    "[\"links\"]",
//    "[\"links\"]",
//    ""
//  ]
```

## 2. Transform

Use template to transform one object to another

> Step 1. Take any JSON object

```js
var data = {
  "title": "List of websites",
  "description": "This is a list of popular websites"
  "data": {
    "sites": [{
      "name": "Google",
      "url": "https://google.com"
    }, {
      "name": "Facebook",
      "url": "https://facebook.com"
    }, {
      "name": "Twitter",
      "url": "https://twitter.com"
    }, {
      "name": "Github",
      "url": "https://github.com"
    }]
  }
}
```

> Step 2. Select and transform with a template JSON object

```js
var sel = st.select(data, function(key, val){
            return key === 'sites';
          })
          .transformWith({
            "items": {
              "{{#each sites}}": {
                "tag": "<a href='{{url}}'>{{name}}</a>"
              }
            }
          })

```


> Step 3. Get the result

```js
var keys = sel.keys();
//  [
//    "tag",
//    "tag",
//    "tag",
//    "tag"
//  ]

var values = sel.values();
//  [
//    "<a href='https://google.com'>Google</a>",
//    "<a href='https://facebook.com'>Facebook</a>",
//    "<a href='https://twitter.com'>Twitter</a>",
//    "<a href='https://github.com'>Github</a>"
//  ]

var objects = sel.objects();
//  [
//    {
//      "tag": "<a href='https://google.com'>Google</a>"
//    }, {
//      "tag": "<a href='https://facebook.com'>Facebook</a>"
//    }, {
//      "tag": "<a href='https://twitter.com'>Twitter</a>"
//    }, {
//      "tag": "<a href='https://github.com'>Github</a>"
//    }
//  ]

var root = sel.root();
//  {
//    "items": [{
//      "tag": "<a href='https://google.com'>Google</a>"
//    }, {
//      "tag": "<a href='https://facebook.com'>Facebook</a>"
//    }, {
//      "tag": "<a href='https://twitter.com'>Twitter</a>"
//    }, {
//      "tag": "<a href='https://github.com'>Github</a>"
//    }]
//  }
```

---

# Usage

## In a browser

```js
<script src="st.js"></script>
<script>
var parsed = st.select({ "items": [1,2,3,4] })
                .transformWith({
                  "{{#each items}}": {
                    "type": "label", "text": "{{this}}"
                  }
                })
                .root();
</script>
```

## In node.js

> Install through npm:

```bash
$ npm install stjs
```

> Use

```js
const st = require('stjs');

const parsed = st.select({ "items": [1,2,3,4] })
                .transformWith({
                  "{{#each items}}": {
                    "type": "label", "text": "{{this}}"
                  }
                })
                .root();
```

## 高级用法
```js
const st = require("stjs");

const data = {
    items: [{
        type: "image",
        url: "https://header.url"
    }, {
        type: "horizontal",
        components: [{
            type: "image",
            url: "https://avatar.url"
        }, {
            type: "vertical",
            components: [{
                type: "label",
                text: "Ethan"
            }, {
                type: "image",
                url: "http://content.url"
            }]
        }]
    }]
};
const template = {
    "{{#each items}}": {
        "type": "{{type}}",
        "haschildren": "{{'components' in this ? true : false}}",
        "childrencount": "{{'components' in this ? this.components.length : 0}}"
    }
}

var generated = st.select(data).transform(template).root();
console.log(JSON.stringify(generated, null, 2));
/**
[
  {
    "type": "image",
    "haschildren": false,
    "childrencount": 0
  },
  {
    "type": "horizontal",
    "haschildren": true,
    "childrencount": 2
  }
]
 */
generated = st.select(generated).transformSQL("SELECT SUM(childrencount) as c FROM ?").root();
console.log(JSON.stringify(generated, null, 2));
/**
[
  {
    "c": 2
  }
]
 */

generated = st.select(generated).transformSelector("$..c").root();
console.log(JSON.stringify(generated, null, 2));
/**
 2 
 */
```


### Learn more at [selecttransform.github.io/site](https://selecttransform.github.io/site)