Tables side by side - php

Question

How can I put two arrays side by side using twig ?
This is my input
{% for key, item in CompareArray %}
{% for x in item %}
<tr>
{% if key =='last' %}
<td> last</td>
{% endif %}
{% if key == 'primary' %}
<td> primary</td>
{% endif %}
</tr>
{% endfor %}
{% endfor %}
The desired output
table,td{
border: 1px solid black;
padding: 1px;
}
<table>
<tr>
<td> last.val1 </td>
<td> last.val2 </td>
<td> last.val3 </td>
<td> #### </td>
<td> primary.val1 </td>
<td> primary.val2 </td>
<td> primary.val3 </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<table>

Answer 1

Based on the shared information I see a couple of possible solutions.
But first confirm if I understand correctly what you're trying to achieve.
You want to have table where the item information of the last group is displayed first with a separator column and then the item information of the primary group on the left? And as seen in the screen shot of the array the number of items in the group isn't even necessarily the same?
First think to consider would be should we create two different tables one for primary group and one for last and style them through css to look as if they're in they are side by side.
{% for groupKey, items in CompareArray %}
<table>
{% for item in items %}
<tr>
<td>{{ groupKey }}.{{ item.prop1 }}</td>
<td>{{ groupKey }}.{{ item.prop2 }}</td>
<td>{{ groupKey }}.{{ item.prop3 }}</td>
</tr>
{% endfor %}
</table>
{% endfor %}
Second solution would be a complicated use of attribute this means that both arrays have to have same keys. Here you'd iterate over the largest group and then add the corresponding value from the other group. I'm using some macros to better separate the logic. The block named myTemplate is the code you'd insert where you wanted the data to be displayed.
{% block myTemplate %}
{% if CompareArray.last|length > CompareArray.primary|length %}
{{ _self.lastIsLonger(CompareArray.last, CompareArray.primary) }}
{% else %}
{{ _self.primaryIsLonger(CompareArray.last, CompareArray.primary) }}
{% endif %}
{% endblock %}
{% macro lastIsLonger(lastGroup, primaryGroup) %}
{% set primaryLenght = primaryGroup|length %}
<table>
{% for k,item in lastGroup %}
<tr>
{{ _self.buildElementData(item) }}
<td> #### </td>
{{ _self.buildElementData(loop.index <= primaryLenght ? attribute(primaryGroup, k) : {}) }}
</tr>
{% endfor %}
</table>
{% endmacro %}
{% macro primaryIsLonger(lastGroup, primaryGroup) %}
{% set lastGroupLength = lastGroup|length %}
<table>
{% for k,item in primaryGroup %}
<tr>
{{ _self.buildElementData(loop.index <= lastGroupLength ? attribute(lastGroup, k) : {}) }}
<td> #### </td>
{{ _self.buildElementData(item) }}
</tr>
{% endfor %}
</table>
{% endmacro %}
{% macro buildElementData(item) %}
<td>{{ item.prop1 ?? '' }}</td>
<td>{{ item.prop2 ?? '' }}</td>
<td>{{ item.prop3 ?? '' }}</td>
{% endmacro %}
If I understand what you're doing I think a third solution I think would be best. That is that from the PHP side you matched which items you wanted to compare so the data you'd insert would look something like this:
[
[
'last' => [
'prop1' => '...',
'prop2' => '...',
'prop3' => '...',
],
'primary' => [
'prop1' => '...',
'prop2' => '...',
'prop3' => '...',
],
], [
'last' => [
'prop1' => '...',
'prop2' => '...',
'prop3' => '...',
],
'primary' => [
'prop1' => '...',
'prop2' => '...',
'prop3' => '...',
],
]
];
This way you're not relying on dirty tricks and do most of the logic where it belongs. The corresponding generation template generation is thus much more pleasing.
{% block myTemplate %}
<table>
{% for row in CompareArray %}
<tr>
{{ _self.buildElementData(row.last ?? {}) }}
<td> #### </td>
{{ _self.buildElementData(row.primary ?? {}) }}
</tr>
{% endfor %}
</table>
{% endblock %}
{% macro buildElementData(item) %}
<td>{{ item.prop1 ?? '' }}</td>
<td>{{ item.prop2 ?? '' }}</td>
<td>{{ item.prop3 ?? '' }}</td>
{% endmacro %}