Rajeev Pentyala – Microsoft Power Platform

In this article, I will demonstrate how to utilize the ParseJson function to parse JSON data and bind it to Gallery control.

Scenario:

• Create a JSON string that contains a collection of ‘Student’ objects, each with properties such as Name, Mobile, Email, and City.
• Read and Parse the JSON string into a collection.
• Bind the collection to Gallery control.

Let’s get started with JSON preparation and parsing, and then binding it to a Gallery.

Prepare a Sample JSON string:

• I’ve asked ChatGpt to prepare a JSON string of Students and it instantly generated sample JSON.
• Alternately, you can also use ObjGen website to generate a sample JSON.

Use the ParseJson function to parse the Json string:

Now that we have the JSON string ready, let’s use ParseJson function to parse it into a collection.

• Create a new Canvas App, add a Text control, and paste the JSON string prepared in the above section.
  • I’ve named the Text control as ‘txtJsonInput‘.

• Let’s begin with a simple parse that provides the count of student records in the JSON string.
• Add a Button control and on OnSelect event, write the following formula.

UpdateContext({TotalStudents: CountRows(Table((ParseJSON(txtJsonInput.Text))))});

• To understand the formula above, note that the ParseJSON function parses a valid JSON string and returns an untyped object that represents the JSON structure.
• Since our JSON structure is a array of records, I am type casting it to the Table(i.e., Table((ParseJSON(txtJsonInput.Text)))
• Next, I am using CountRows function to retrieve the record count of the table.
• Use the UpdateContext function to set the count of rows value to the TotalStudents variable.

• Add a Label control to display the TotalStudents.
  • My JSON string contains 6 students, so the TotalStudents variable is set to 6.

Bind the students to Gallery:

• Now that we’ve parsed and mapped the JSON collection to a table, let’s extend the formula to convert the table rows into a Collection and map them to a Gallery.
• Write the following formula to load the JSON collection to a PowerFx collection.

Clear(colStudents);
ForAll(
    Table(ParseJSON(txtJsonInput.Text)) As tblStudents,
    Collect(
        colStudents,
        {
            studName: Text(tblStudents.Value.Name),
            studMobile: Text(tblStudents.Value.Mobile),
            studEmail: Text(tblStudents.Value.Email),
            studCity: Text(tblStudents.Value.City)
        }
    )
);

• In the above formula, we are first parsing the JSON string in to Table (i.e., Table(ParseJSON(txtJsonInput.Text)) As tblStudents).
• Then using ForAll function to loop through each row in the Table and adding to colStudents.
• We are also using Clear(colStudents); to clear the collection before loading fresh.

• That’s all that’s needed. Now add a Gallery control and set the ‘Data source’ as the colStudents collection.

🙂