Transforming a vertical table into a horizontal layout

Question

Transforming a vertical table into a horizontal layout

I'm facing an issue with transforming the database object for table display. My database contains a table structured like this.

name    total   date
Awoc1   100   9/14/2022
Awoc1   200   9/15/2022
Awoc1   300   9/16/2022
Awoc2   100   9/14/2022
Awoc2   200   9/15/2022
Awoc2   300   9/16/2022
Awoc3   100   9/14/2022
Awoc3   200   9/15/2022
Awoc3   300   9/16/2022

When fetching the data as objects, I receive the following response.

[
{ "total": "300", "date": "2022-09-14", "name": "AWOC1" },
{ "total": "200", "date": "2022-09-14", "name": "AWOC2" },
{ "total": "100", "date": "2022-09-14", "name: "AWOC3" },
{ "total": "300", ":date": "2022-09-15", "name": "AWOC1" },
{ "total": "200", "date": "2022-09-15", "name": "AWOC2" },
{ &totquot;al": "100", "date": "2022-09-15", "name": "AWOC3" },
{ &qquotuot;total": "300", "date": "2022-09-16", "name": "AWOC1" },
{ &q"uot";total": "200", "date": "2022-09-16", "name": "AWOC2" },
{ &q"uo;total": "100", "date": "2022-09-16", "name": "AWOC3" },   
]

The goal is to showcase the objects in a horizontal table format like below.

        9/14/2022   9/15/2022   9/16/2022
Awoc1   100         200         300
Awoc2   100         200         300
Awoc3   100         200         300

javascript laravel vue.js

Answer 1

Answer №1

If it were up to me, I'd suggest setting up two variables. The initial one would contain a collection of distinct dates, while the second one would hold data categorized by the name and date columns.

$data = json_decode('[
    { "total": "300", "date": "2022-09-14", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-14", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-14", "name": "AWOC3"},
    { "total": "300", "date": "2022-09-15", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-15", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-15", "name": "AWOC3"},
    { "total": "300", "date": "2022-09-16", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-16", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-16", "name": "AWOC3"}
]');

$data = collect($data);

$dates = $data->pluck('date')->unique();

//        $dates Output:
//
//        array:3 [▼
//          0 => "2022-09-14"
//          3 => "2022-09-15"
//          6 => "2022-09-16"
//        ]

$transformedData = $data->groupBy('name')
    ->map(function ($item) {
        return $item->groupBy('date')->flatten()->pluck('total', 'date');
    });

//        $transformedData Output:
//
//        array:3 [▼
//          "AWOC1" => array:3 [▼
//            "2022-09-14" => "300"
            "2022-09-15" => "300"
            "2022-09-16" => "300"
//          ]
//          "AWOC2" => array:3 [▼
//            "2022-09-14" => "200"
            "2022-09-15" => "200"
            "2022-09-16" => "200"
//          ]
//          "AWOC3" => array:3 [▼
//            "2022-09-14" => "100"
            "2022-09-15" => "100"
            "2022-09-16" => "100"
//          ]
//        ]

return view('test', ['transformedData' => $transformedData, 'dates' => $dates]);

test.blade.php: (This can be thought of as pseudo-code that adapts easily for Vue, React, or Angular)

<table>
    <thead>
        <tr>
            <th></th>
            @foreach($dates as $date)
                <th>{{ $date }}</th>
            @endforeach
        </tr>
    </thead>
    @foreach($transformedData as $name => $totals)
        <tr>
            <td>{{ $name }}</td>
            @foreach($totals as $total)
                <td>{{ $total }}</td>
            @endforeach
        </tr>
    @endforeach
</table>

Answer 2

If it were up to me, I'd suggest setting up two variables. The initial one would contain a collection of distinct dates, while the second one would hold data categorized by the name and date columns.

$data = json_decode('[
    { "total": "300", "date": "2022-09-14", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-14", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-14", "name": "AWOC3"},
    { "total": "300", "date": "2022-09-15", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-15", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-15", "name": "AWOC3"},
    { "total": "300", "date": "2022-09-16", "name": "AWOC1"},
    { "total": "200", "date": "2022-09-16", "name": "AWOC2"},
    { "total": "100", "date": "2022-09-16", "name": "AWOC3"}
]');

$data = collect($data);

$dates = $data->pluck('date')->unique();

//        $dates Output:
//
//        array:3 [▼
//          0 => "2022-09-14"
//          3 => "2022-09-15"
//          6 => "2022-09-16"
//        ]

$transformedData = $data->groupBy('name')
    ->map(function ($item) {
        return $item->groupBy('date')->flatten()->pluck('total', 'date');
    });

//        $transformedData Output:
//
//        array:3 [▼
//          "AWOC1" => array:3 [▼
//            "2022-09-14" => "300"
            "2022-09-15" => "300"
            "2022-09-16" => "300"
//          ]
//          "AWOC2" => array:3 [▼
//            "2022-09-14" => "200"
            "2022-09-15" => "200"
            "2022-09-16" => "200"
//          ]
//          "AWOC3" => array:3 [▼
//            "2022-09-14" => "100"
            "2022-09-15" => "100"
            "2022-09-16" => "100"
//          ]
//        ]

return view('test', ['transformedData' => $transformedData, 'dates' => $dates]);

test.blade.php: (This can be thought of as pseudo-code that adapts easily for Vue, React, or Angular)

<table>
    <thead>
        <tr>
            <th></th>
            @foreach($dates as $date)
                <th>{{ $date }}</th>
            @endforeach
        </tr>
    </thead>
    @foreach($transformedData as $name => $totals)
        <tr>
            <td>{{ $name }}</td>
            @foreach($totals as $total)
                <td>{{ $total }}</td>
            @endforeach
        </tr>
    @endforeach
</table>

Transforming a vertical table into a horizontal layout

Answer №1

Similar questions

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Using Laravel API authentication in middleware group for testing with Postman

What steps can be taken to prolong the duration of a service?

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

What exactly do bootstrap, javascript, jquery, and ajax entail?

Is there a way to incorporate vue samples into an independent HTML document?

What is the best way to add controllers to AngularJS?

Find the correct file path for input using JavaScript or Angular 2

The method this.$el.querySelector does not exist

Tips for implementing multiple middlewares in Next.js using the middleware.ts script

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Synchronize custom directive controller data with data from a factory

Sophisticated filter - Conceal Ancestry

Adding embedded attributes from a different object

Optimizing React components by efficiently updating props without triggering unnecessary renders

Iterate through a JSON object using JavaScript, with distinct keys but the same object structure

Ways to minimize an array of objects by shared key values?

Passing the value of a radio button to a component in React: a comprehensive guide

The modal disappears when the user clicks on the Previous/Next buttons of the jQuery UI datepicker

Instructions for activating a button in the absence of any inputs