Populating columns based on JSON nested list

ajt

I have the following JSON that I am using to populate a datatable:

{
    "results": [
        {
            "cycle_day": 5,
            "date": "<a href=\"/edit/1/17/2020/\">Friday, Jan 17, 2020</a>",
            "arche": "<div class='vert'>Goddess, Maiden</div>",
            "mp": "<img src='/static/images/luna/last-quarter.png' style='width:21px;'>",
            "astrology": null,
            "food": "PR",
            "water": "PH",
            "sleep": "11.0",
            "moon_center": {
                "name": "Lips"
            },
            "happening_acts": [
                {
                    "name": "test act 2",
                    "slug": "test-act-2",
                    "count": 1
                },
                {
                    "name": "ajt test act 1",
                    "slug": "ajt-test-act-1",
                    "count": 1
                },
                {
                    "name": "JOURNAL",
                    "slug": "journal",
                    "count": 1
                },
                {
                    "name": "STRETCH",
                    "slug": "stretch",
                    "count": 1
                }
            ]
        }
    ]
}

Is there a way that I can split up happening_acts into the four sections that you see above, and then insert the "count" value into the a column that is associated to that section's "name" or "slug" field?

Here is my HTML:

<table id="entries" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/entries/?format=datatables">
          <thead>
              <th class="roro" data-data="arche"><span>archetype<span></th>
              <th class="roro" data-data="cycle_day"><span>cycle day</span></th>
              <!-- <th class="roro" data-data="day_name">day</th> -->
                <th class="roro" data-data="date">date</th>
                <th class="roro" data-data="mp"><span>moon</span></th>
                <th class="roro" data-data="astrology"><span>astro</span></th>
                <th class="roro" data-data="food"><span>food</span></th>
                <th class="roro" data-data="water"><span>water</span></th>
                <th class="roro" data-data="sleep"><span>sleep</span></th>
                <!-- <th class="roro" data-data="reflection"><span>reflection</span></th> -->
                <th class="roro" data-data="moon_center.name">mooncenter</th>
                <th class="roro selfcare" data-data="happening_acts.journal"><span>JOURNAL</span></th>
                <th class="roro selfcare" data-data="happening_acts.stretch"><span>STRETCH</span></th>
                <th class="roro selfcare" data-data="happening_acts.ajt-test-act-1"><span>ajt test act 1</span></th>
                <th class="roro selfcare" data-data="happening_acts.test-act-2"><span>test act 2</span></th>
                <th class="roro selfcare" data-data="happening_acts.stretch"><span>STRETCH</span></th>
                <th class="roro selfcare" data-data="happening_acts.journal"><span>JOURNAL</span></th>
               .....        
                </tr>
    </thead>
</table>

I appreciate any and all help. This is a great community.

kthorngren

I'm not sure exactly what you want but you can use columns.render for this. I put together a simple example with your data that hopefully will get you started:
http://live.datatables.net/wemozusa/1/edit

It shows a couple different ways to access happening_acts using columns.render; one with the data parameter and one using the row parameter. If you still have questions please update the example to show the table more like what you want.

Kevin

ajt

Hey there, Kevin. Thank you so much! I have cloned the example. It is here: http://live.datatables.net/qaluqise/1/edit

In the new example you will see that there are some columns that don't have happening_acts data. I updated the columns information just to make it render.

I am creating the HTML table in django, so I am able to create the header before initiating datatables. The problem is that the column headers are not consistent from user to user, and not all columns for a row will have a happening_act.

Is there a way that I could iterate over all of the happening_acts, and use row to select the column by the name (in header or maybe an id) of each happening_acts, and then insert the count?

Thank you. I appreciate it.

kthorngren

I am creating the HTML table in django, so I am able to create the header before initiating datatables. The problem is that the column headers are not consistent from user to user,

You can pass the columns in ajax and use that to build the columns array. This means you can't use the Datatables ajax option but will use jQuery ajax(). Here is an example:
http://live.datatables.net/huyexejo/1/edit

not all columns for a row will have a happening_act.

Not sure what this means specifically. You may need to check in the happening_act array to see if the data for that column is there. If not then return a default value.

Is there a way that I could iterate over all of the happening_acts, and use row to select the column by the name (in header or maybe an id) of each happening_acts, and then insert the count?

You can place the needed Javascript code inside the render function to iterate the happening_act array. There is a forth parameter for columns.render, meta, which you can get either the current row or column (meta.col) index.

Sorry its still not clear to me exactly what you want. Hopefully this helps get you closer.

Kevin

ajt

Hey there Kevin, this is getting me closer. I have a question though. In the json example above, is it possible to specify data by a specific value for a specific key? An example of something I have tried is:

data: 'happening_acts.slug["test-act-2"]',

and then I try to access data.count.

This isn't working, but is there a way select a happening_act by the slug value? I need to be able to get the count for happening_acts with a specific slug value.

kthorngren

happening_acts is an array of objects so you need to access the objects by array index such as happening_acts[0].slug. Its a Javascript array so you can loop through it to find the object, test-act-2 for example, that you want for the column.

You could do something like this:

      {
        data: 'happening_acts.0',  // test-act-2
        render: function (data, type, row) {
          return data.count;
        }
      },

See the example: http://live.datatables.net/qaluqise/3/edit

This assumes that test-act-2 is always array element 0.

Kevin