How do I populate JSON array to ASP:repeater

Question

0.00/5 (No votes)

See more:

I am stuck with porting and formatting JSON array into ASP:Repeater
JSON Array:

{"root":[{"prog_id":"P1000004","prog_name":"Course1","prog_banner":"","isClientActive":"","courses":[{"course_id":"C1000012","course_name":"Course1-1","course_description":"","course_thumbnail":""},{"course_id":"C1000013","course_name":"Course1-2","course_description":"","course_thumbnail":""}]},{"prog_id":"P1000010","prog_name":"Course2","prog_banner":"1000010.jpg","isClientActive":"active","courses":[{"course_id":"C1000007","course_name":"Course2-1","course_description":"","course_thumbnail":""},{"course_id":"C1000008","course_name":"Course2-2","course_description":"","course_thumbnail":""},{"course_id":"C1000009","course_name":"Course2-3","course_description":"","course_thumbnail":""},{"course_id":"C1000010","course_name":"Course2-4","course_description":"","course_thumbnail":""},{"course_id":"C1000011","course_name":"Course2-5","course_description":"","course_thumbnail":""}]}]}

Current Output:

P1000004: Course1
Canorous_Academy.test.Cours[]
P1000010: Course2
Canorous_Academy.test.Cours[]

Desired Output (Should look like):

Repeater-Item 1
P1000004: Course1
Courses:
Course1-1
Course1-2

Repeater-Item 2
P1000010: Course2
Courses:
Course2-1
Course2-2
Course2-3
Course2-4
Course2-5

What I have tried:

ASP Code

ASP.NET

<asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <%# DataBinder.Eval(Container.DataItem, "prog_id") %>">:<%# DataBinder.Eval(Container.DataItem, "prog_name") %>
                <ul>
                    <li><%# DataBinder.Eval(Container.DataItem, "courses") %></li>
                </ul>
                </ItemTemplate>
        </asp:Repeater>

C# Code

C#

protected void Page_Load(object sender, EventArgs e)
        {
string json="{\"root\":[{\"prog_id\":\"P1000004\",\"prog_name\":\"Course1\",\"prog_banner\":\"\",\"isClientActive\":\"\",\"courses\":[{\"course_id\":\"C1000012\",\"course_name\":\"Course1-1\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000013\",\"course_name\":\"Course1-2\",\"course_description\":\"\",\"course_thumbnail\":\"\"}]},{\"prog_id\":\"P1000010\",\"prog_name\":\"Course2\",\"prog_banner\":\"1000010.jpg\",\"isClientActive\":\"active\",\"courses\":[{\"course_id\":\"C1000007\",\"course_name\":\"Course2-1\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000008\",\"course_name\":\"Course2-2\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000009\",\"course_name\":\"Course2-3\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000010\",\"course_name\":\"Course2-4\",\"course_description\":\"\",\"course_thumbnail\":\"\"},{\"course_id\":\"C1000011\",\"course_name\":\"Course2-5\",\"course_description\":\"\",\"course_thumbnail\":\"\"}]}]}";

             Rootobject _objRoot = JsonConvert.DeserializeObject<Rootobject>(json);
             GetDataTableFromObjects(_objRoot.root);
             Repeater1.DataSource = GetDataTableFromObjects(_objRoot.root);
             Repeater1.DataBind();
        }
public static DataTable GetDataTableFromObjects(object[] objects)
        {
            if (objects != null && objects.Length > 0)
            {
                Type t = objects[0].GetType();
                DataTable dt = new DataTable(t.Name);
                foreach (PropertyInfo pi in t.GetProperties())
                {
                    dt.Columns.Add(new DataColumn(pi.Name));
                }
                foreach (var o in objects)
                {
                    DataRow dr = dt.NewRow();
                    foreach (DataColumn dc in dt.Columns)
                    {
                        dr[dc.ColumnName] = o.GetType().GetProperty(dc.ColumnName).GetValue(o, null);
                    }
                    dt.Rows.Add(dr);
                }
                return dt;
            }
            return null;
        }
    }

public class Rootobject
    {
        public Root[] root { get; set; }
    }

public class Root
    {
        public string prog_id { get; set; }
        public string prog_name { get; set; }
        public string prog_banner { get; set; }
        public string isClientActive { get; set; }
        public Cours[] courses { get; set; }
    }

public class Cours
    {
        public string course_id { get; set; }
        public string course_name { get; set; }
        public string course_description { get; set; }
        public string course_thumbnail { get; set; }
    }

Posted 26-Apr-20 2:59am

Member 8107173

Updated 29-Apr-20 8:08am

v3

Add a Solution

Comments

MadMyche 26-Apr-20 9:06am

There is an important detail missing from your question: Where is the JSON coming from? Is it from an AJAX request? Or is it coming from a request being made server-side? Or is content from a file?
I would suggest that you use the Improve Question widget above to add this into the original question.

Member 8107173 26-Apr-20 9:32am

Thanks, MadMyche for the response. I have updated the code & Question. Please go through it and see if you can help me with this. I appreciate your help.

MadMyche 26-Apr-20 9:39am

You're Welcome.
This is more for the benefit of others to help you; as I don't work with the Repeater class.
When you debug this, are your classes populating properly when de-serialized?

Member 8107173 26-Apr-20 9:47am

yes, it's de-serializing as expected. I am only stuck at the Repeater level where I am unable to populate child-array data <%# DataBinder.Eval(Container.DataItem, "courses") %>

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-04-29T08:10:00

Don't convert the objects to a DataTable; just bind the repeater directly to the root collection.

You can then use a nested repeater to display the related objects.

You'll also want to make sure the values are HTML-encoded. You can use <%#: ... %> instead of <%# ... %> to do that. (Note the extra : after the #.)

C#

protected void Page_Load(object sender, EventArgs e)
{
    string json = ...;
    Rootobject _objRoot = JsonConvert.DeserializeObject<Rootobject>(json);
    Repeater1.DataSource = _objRoot.root;
    Repeater1.DataBind();
}

ASPX

<asp:Repeater ID="Repeater1" runat="server" ModelType="YourNamespace.Root">
<ItemTemplate>
    <%#: Item.prog_id %>: <%#: Item.prog_name %>
    <ul>
        <asp:Repeater runat="server" ModelType="YourNamespace.Cours" DataSource='<% Item.courses %>'>
        <ItemTemplate>
            <li><%#: Item.course_name %></li>
        </ItemTemplate>
        </asp:Repeater>
    </ul>
</ItemTemplate>
</asp:Repeater>

Or, if you don't want to specify the model types: