Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

NoodlでJSON BOXを使ってみた

今回やること

JSON BOXをNoodlで使う
https://jsonbox.io/

スクリーンショット 2020-12-05 10.57.05.png

JSON BOXとは

HTTPリクエストでJSONデータの追加・更新・取得などができるサービス。
無料で、30日間だけ保管してくれます。簡易的にDB使いたい時に便利です。

JSON BOXのDoc
https://github.com/vasanthv/jsonbox#readme

NoodlでJSON BOX

新しいJSON BOX IDを取得

https://jsonbox.io/ にアクセスするだけで、新しくJSON BOXが生成されます。
ドメインの下のbox_XXXXXX がJSONBOXのIDです。
https://jsonbox.io/【これがJSON BOX ID】

POST: 新しくデータを追加

新しくデータを追加したい時に使います。
同じデータでも、POSTで送ると別のIDが割り振られた違うデータになります。

RESTノードの設定

Resource: JSON BOXのID
Method: POST
Endpoint: https://jsonbox.io

RESTノードの中身


define({
    // The input ports of the REST node, name of input and type
    inputs:{
        //ExampleInput:'number',
        name:'string',
        age:'number',
        countory:'string'
    },

    // The output ports of the REST node, name of output and type
    outputs:{
        //ExampleOutput:'string',
    },

    request:function(inputs,request) {
        request.headers = {
            dataType: "json",
            contentType: "application/json"};
        request.content ={
            name: inputs.name,
            age: inputs.age,
            countory: inputs.countory
        }

    },

    response:function(outputs,response) {
    }
})

GET: 登録したデータの取得

登録したデータの一覧を取得します。

RESTノードの設定

Resource: JSON BOXのID
Method: GET
Endpoint: https://jsonbox.io

RESTノードの中身

define({
    // The input ports of the REST node, name of input and type
    inputs:{
        //ExampleInput:'number',
    },

    // The output ports of the REST node, name of output and type
    outputs:{
        //ExampleOutput:'string',
    },

    request:function(inputs,request) {
        request.headers = {"content-type": "application/json"};

    },

    response:function(outputs,response) {
        console.log(response.content);
    }
})

結果

スクリーンショット 2020-12-05 10.48.30.png

IDを指定して、特定のデータだけ取り出したい時

RESTノードの設定をこのように変更すると、特定の一個を取り出すことができます。

スクリーンショット 2020-12-05 11.26.50.png

Resource: /【自分のBOX ID】/【データのID】


define({
    // The input ports of the REST node, name of input and type
    inputs:{
        //ExampleInput:'number',
    },

    // The output ports of the REST node, name of output and type
    outputs:{
        //ExampleOutput:'string',
        name:'string',
        age:'number',
        countory:'string'
    },

    request:function(inputs,request) {
        request.headers = {"content-type": "application/json"};

    },

    response:function(outputs,response) {
        console.log(response.content);
        outputs.name = response.content.name;
        outputs.age = response.content.age;
        outputs.countory = response.content.countory;
    }
})


PUT: データの更新

更新したいデータのIDを指定して、登録したデータの更新をします。
データのIDはGETで確かめてください。

スクリーンショット 2020-12-05 10.48.30.png

RESTノードの設定

Resource: /【自分のBOX ID】/【データのID】
Method: PUT
Endpoint: https://jsonbox.io

RESTノードの中身

define({
    // The input ports of the REST node, name of input and type
    inputs:{
        //ExampleInput:'number',
        name:'string',
        age:'number',
        countory:'string'
    },

    // The output ports of the REST node, name of output and type
    outputs:{
        //ExampleOutput:'string',
    },

    request:function(inputs,request) {
        request.headers = {
            dataType: "json",
            contentType: "application/json"};
        request.content ={
            name: inputs.name,
            age: inputs.age,
            countory: inputs.countory
        }

    },

    response:function(outputs,response) {
    }
})

結果

PUTで更新したあと、GETしてください。
きちんと修正が反映されていれば成功です。
スクリーンショット 2020-12-05 11.13.53.png

完成!

NoodlからJSON BOXを作ることができました!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
3
Help us understand the problem. What are the problem?