Sorting data tables from two json structures

What am I trying to achieve?

I'm trying to sort data based on their field name, in the correct position on the table to be read easily and exported if need be.

So far I'm having trouble with the layout, ensuring that everything is laid out correctly.

I have four tables: Events, Cards, card_events(polymorphic) and Leads.

Cards belong to Events and a Card contains fields in the form of JSON which looks like this:

[
  {
    "name": "Title",
    "type": "dropdown",
    "options": [
      "Mr",
      "Miss",
      "Mrs",
      "Ms",
      "Dr"
    ]
  },
  {
    "name": "First Name",
    "type": "text"
  },
  {
    "name": "Last Name",
    "type": "text"
  },
  {
    "name": "Email",
    "type": "text"
  },
  {
    "name": "Phone Number",
    "type": "numeric"
  },
  {
    "name": "Opt in?",
    "type": "bool"
  }
]

Since these fields can be anything defined by the user based on the data they want users to fill in it makes life a lot harder when trying to get all the data to sync up correctly. Here's what I currently have so far:

As you can see, the data is kind of all over the place. What makes this more difficult, is the card order can be changed at any given time.

What have I tried?

Currently it works in a way that if the cards stayed in the same order as you filled them out, it would work great however if users aren't filling in a specific card, you could disable it and this is where the issues begin.

So here's my code for displaying the leads which I've attempted to match up to the table heading name:

@foreach($leads as $lead)
    <?php
    $fields = json_decode($lead->data);
    ?>
    <tr>
        @foreach($fields as $f)

            @foreach($cards as $card)
                <?php $fields = json_decode($card->fields); ?>
                @foreach($fields as $field)
                    @if($field->name == $f->name)
                        @if($field->type == 'bool')
                            <td>{{$f->value === true ? 'Yes' : 'No'}}</td>
                        @else
                            <td>{{$f->value}}</td>
                        @endif
                    @endif
                @endforeach
            @endforeach

        @endforeach
    </tr>
@endforeach

This how I generate the table headings:

@foreach($cards as $card)
    <?php $fields = json_decode($card->fields); ?>
    @foreach($fields as $field)
        <th>{{$field->name}}</th>
    @endforeach
@endforeach

Since this is dependant on the the user has filled in, here is the data structure for some of the values:

[
  {
    "name": "Title",
    "value": "Mrs"
  },
  {
    "name": "First Name",
    "value": "Sally"
  },
  {
    "name": "Last Name",
    "value": "Jones"
  },
  {
    "name": "Email",
    "value": "test@exmaple.com"
  },
  {
    "name": "Phone Number",
    "value": "0123456789"
  },
  {
    "name": "Opt in?",
    "value": true
  },
  {
    "name": "Flat\/House Number",
    "value": "123"
  },
  {
    "name": "Street",
    "value": "Generic Street"
  },
  {
    "name": "Post Code",
    "value": "TE57 1NG"
  }
]

I could show each lead individually which would make life easier but I'd still run in to this issue in the future when I come to export the data.

What I think should be done is something similar to the way I've done it already, try and match up the headings to the field name.

If there's anyone who could help get this data lined up, I would highly appreciate it!

Happy for this to be answered in JS based on Vue as I use Vue in other places of the site.

After wasting all morning and half of my afternoon, I return with the solution!

It's not the prettiest, definitely not the best, if you want to improve upon this post an answer.

Basically just the $needle / $haystack route, here's the code!

leads.blade.php

<table class="table is-striped is-fullwidth">
                <thead>
                <tr>
                    @foreach($headings as $head)
                        <th>{{$head}}</th>
                    @endforeach
                </tr>
                </thead>
                <tbody>
                @foreach($leads as $lead)
                    <tr>
                        @foreach($headings as $key => $head)
                            <?php  $placed = false; ?>
                            @foreach($lead as $val)
                                @if($val->name === $head)
                                    <td>
                                        {{ $val->value ? $val->value : 'N/A' }}
                                    </td>

                                    <?php
                                    $placed = true;
                                    break;
                                    ?>
                                @endif
                            @endforeach
                            @if($placed === false)
                                <td></td>
                                <?php  continue; ?>

                            @endif
                        @endforeach
                    </tr>
                @endforeach
                </tbody>
            </table>

Controller

$headings = [];
    foreach($cards as $card) {
        $fields = json_decode($card->fields);
        foreach($fields as $field) {
            array_push($headings, $field->name);
        }
    }

    $leads = [];
    foreach($event->leads as $lead) {
        $data = json_decode($lead->data);
        array_push($leads, $data);
    }