Call & Lambda

Filter and transform data using call expressions with lambda functions. Demonstrates array filtering, string methods, and computed values.

Try in Playground

Features Used

Call expressions
Lambda expressions
Array filter/map
String methods
Array length
Case-insensitive search

How to Run

npm install @constela/core @constela/runtime

npx constela run call-lambda.json

Source Code

json

{
  "version": "1.0",
  "state": {
    "products": {
      "type": "list",
      "initial": [
        {
          "id": 1,
          "name": "Apple",
          "price": 150
        },
        {
          "id": 2,
          "name": "Banana",
          "price": 100
        },
        {
          "id": 3,
          "name": "Orange",
          "price": 200
        },
        {
          "id": 4,
          "name": "Grape",
          "price": 300
        },
        {
          "id": 5,
          "name": "Pineapple",
          "price": 250
        }
      ]
    },
    "searchQuery": {
      "type": "string",
      "initial": ""
    }
  },
  "actions": [
    {
      "name": "setSearch",
      "steps": [
        {
          "do": "set",
          "target": "searchQuery",
          "value": {
            "expr": "var",
            "name": "value"
          }
        }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": {
      "style": {
        "expr": "lit",
        "value": "font-family: system-ui, sans-serif; padding: 16px;"
      }
    },
    "children": [
      {
        "kind": "element",
        "tag": "h1",
        "props": {
          "style": {
            "expr": "lit",
            "value": "margin: 0 0 8px 0; font-size: 24px;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Product Filter"
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "p",
        "props": {
          "style": {
            "expr": "lit",
            "value": "color: #666; margin: 0 0 16px 0;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Search products using call/lambda expressions with case-insensitive filtering."
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "input",
        "props": {
          "type": {
            "expr": "lit",
            "value": "text"
          },
          "placeholder": {
            "expr": "lit",
            "value": "Search products..."
          },
          "style": {
            "expr": "lit",
            "value": "width: 100%; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; margin-bottom: 16px; box-sizing: border-box; color: #333;"
          },
          "value": {
            "expr": "state",
            "name": "searchQuery"
          },
          "onInput": {
            "event": "input",
            "action": "setSearch",
            "payload": {
              "expr": "var",
              "name": "value"
            }
          }
        }
      },
      {
        "kind": "element",
        "tag": "div",
        "props": {
          "style": {
            "expr": "lit",
            "value": "margin-bottom: 16px; padding: 12px; background: #f0f9ff; border-radius: 4px; color: #0369a1;"
          }
        },
        "children": [
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": "Showing "
            }
          },
          {
            "kind": "text",
            "value": {
              "expr": "get",
              "base": {
                "expr": "call",
                "target": {
                  "expr": "state",
                  "name": "products"
                },
                "method": "filter",
                "args": [
                  {
                    "expr": "lambda",
                    "param": "p",
                    "body": {
                      "expr": "call",
                      "target": {
                        "expr": "call",
                        "target": {
                          "expr": "get",
                          "base": {
                            "expr": "var",
                            "name": "p"
                          },
                          "path": "name"
                        },
                        "method": "toLowerCase"
                      },
                      "method": "includes",
                      "args": [
                        {
                          "expr": "call",
                          "target": {
                            "expr": "state",
                            "name": "searchQuery"
                          },
                          "method": "toLowerCase"
                        }
                      ]
                    }
                  }
                ]
              },
              "path": "length"
            }
          },
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": " of "
            }
          },
          {
            "kind": "text",
            "value": {
              "expr": "get",
              "base": {
                "expr": "state",
                "name": "products"
              },
              "path": "length"
            }
          },
          {
            "kind": "text",
            "value": {
              "expr": "lit",
              "value": " products"
            }
          }
        ]
      },
      {
        "kind": "element",
        "tag": "ul",
        "props": {
          "style": {
            "expr": "lit",
            "value": "list-style: none; padding: 0; margin: 0;"
          }
        },
        "children": [
          {
            "kind": "each",
            "items": {
              "expr": "call",
              "target": {
                "expr": "state",
                "name": "products"
              },
              "method": "filter",
              "args": [
                {
                  "expr": "lambda",
                  "param": "p",
                  "body": {
                    "expr": "call",
                    "target": {
                      "expr": "call",
                      "target": {
                        "expr": "get",
                        "base": {
                          "expr": "var",
                          "name": "p"
                        },
                        "path": "name"
                      },
                      "method": "toLowerCase"
                    },
                    "method": "includes",
                    "args": [
                      {
                        "expr": "call",
                        "target": {
                          "expr": "state",
                          "name": "searchQuery"
                        },
                        "method": "toLowerCase"
                      }
                    ]
                  }
                }
              ]
            },
            "as": "product",
            "key": {
              "expr": "var",
              "name": "product",
              "path": "id"
            },
            "body": {
              "kind": "element",
              "tag": "li",
              "props": {
                "style": {
                  "expr": "lit",
                  "value": "display: flex; justify-content: space-between; align-items: center; padding: 12px; margin-bottom: 8px; background: #f5f5f5; border-radius: 4px;"
                }
              },
              "children": [
                {
                  "kind": "element",
                  "tag": "span",
                  "props": {
                    "style": {
                      "expr": "lit",
                      "value": "font-weight: 500; color: #333;"
                    }
                  },
                  "children": [
                    {
                      "kind": "text",
                      "value": {
                        "expr": "var",
                        "name": "product",
                        "path": "name"
                      }
                    }
                  ]
                },
                {
                  "kind": "element",
                  "tag": "span",
                  "props": {
                    "style": {
                      "expr": "lit",
                      "value": "color: #16a34a; font-weight: bold;"
                    }
                  },
                  "children": [
                    {
                      "kind": "text",
                      "value": {
                        "expr": "lit",
                        "value": "¥"
                      }
                    },
                    {
                      "kind": "text",
                      "value": {
                        "expr": "var",
                        "name": "product",
                        "path": "price"
                      }
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}