How to pares JSON in Power Apps? The much awaited ParseJSON function is finally here.

Welcome to my blog. Before I go ahead, this is still an experimental feature and is not available in GA.

Having said that, I am pretty sure a feature of this value and importance and something which Power Apps was missing for a long time, will certainly make it GA.

Quite sometime back, Microsoft introduced the JSON function. It was indeed a game changer as it allowed us to convert objects and even images into JSON formats. But the other way around was missing. How to parse JSON string into JSON object.

The function is now available in Power Apps function reference. Haven’t I told you earlier to always keep looking at the Power Apps function reference to discover these new gems?

Let’s first check how we can enable this experimental feature for a canvas app.

Go to you App settings -> Experimental -> ParseJSON function and untyped objects. Enable this feature.

Once enabled, save the app and then re-open it. For me refresh didn’t work but it again may be some cache issue on my side.

Now that’s done, let’s start with an example. For this blog, I have taken a fairly simple JSON but something which shall cover all aspects

{
   "menu": {
      "id": "1234",
      "value": "Sample Value",
      "popup": {
         "menuitem": [
            {
               "value": "New",
               "onclick": "CreateNewDoc()",
               "uniqueid":  "00000000-0000-0000-0000-000000000001"
            },
            {
               "value": "Open",
               "onclick": "OpenDoc()",
               "uniqueid": "00000000-0000-0000-0000-000000000002"
            },
            {
               "value": "Close",
               "onclick": "CloseDoc()",
               "uniqueid": "00000000-0000-0000-0000-000000000003"
            }
         ]
      }
   }
}

I have a simple app UI. A text input to store the JSON content in earlier step. A button when clicked, will parse the JSON and show in the label below.

Let’s focus on the “On Select” event of the Parse JSON button.

UpdateContext({jsonObject : ParseJSON(TextInput1.Text)});
UpdateContext({menuItems: Table(jsonObject.menu.popup.menuitem)});

What am I doing here? Couple of things. The first is to parse the entire JSON text into a JSON object. Here the variable “jsonObject” stores the untyped json object.

The next line of code is more interesting. If you look carefully at the JSON I am using, the menuitem property of the JSON is array.

"menuitem": [
            {
               "value": "New",
               "onclick": "CreateNewDoc()",
               "uniqueid":  "00000000-0000-0000-0000-000000000001"
            },
            {
               "value": "Open",
               "onclick": "OpenDoc()",
               "uniqueid": "00000000-0000-0000-0000-000000000002"
            },
            {
               "value": "Close",
               "onclick": "CloseDoc()",
               "uniqueid": "00000000-0000-0000-0000-000000000003"
            }
         ]

Using Dot(.), I am navigating to the appropriate JSON property and then using the Table function to convert the JSON array into a Power Apps table.

Let’s now try to show the parsed results in the label. Below is the formula for the Text property of the label.

$"Parsed JSON result 
 
ID: {Text(jsonObject.menu.id)} {Char(13)} 
Value: {Text(jsonObject.menu.value)}{Char(13)}" & Concat(
    menuItems,
    With(
        {item: ThisRecord.Value},
        $"{Char(13)}Value: {Text(item.value)}, Onclick: {Text(item.onclick)}, Id: {GUID(item.uniqueid)},{Char(13)}"
    )
)

Basically I have parsed the entire JSON object to the label text. Focus on the code highlighted in bold. To make it even more clear, let’s break it down. Observe how are we navigating the JSON properties using the DOT(.) operator.

• id property -> Text(jsonObject.menu.id)
• value property -> Text(jsonObject.menu.value)
• Each item of the menuitem json array -> Concat(menuItems, With{item: ThisRecord.Value}, $”{Char(13)}Value: {Text(item.value)}, Onclick: {Text(item.onclick)}, Id: {GUID(item.uniqueid)},{Char(13)}” ) )

The With function is not necessary to use here. But I have used it to store the ThisRecord.Value inside item property and then use it to evaluate. Char(13) is just for line break.

Notice also the use of GUID function. Since the uniqueid property is of type GUID, I am using the GUID function to typecast it’s value to appropriate type.

You can similarly use the Date, Value and other Power Apps functions depending on the type of JSON data you are expecting. And below is the result in the label control.

Wonderful to know isn’t it? Something which we have been looking for sometime now is finally here.

Hope this helped. You will also like the below posts

Debajit Dutta
Business Solutions MVP