What is the best method for converting the format of an array from a Laravel Controller to Javascript?

How can I convert the format of an array from a Laravel Controller to JavaScript?

 $data = DB::table('courses')
        ->selectRaw('courses.course_code,COUNT(student_applicants.status) as total')
        ->leftJoin('student_applicants', function ($join) {
            $join->on('courses.id', '=', 'student_applicants.course_id')
                ->where('student_applicants.status', '=', 1)
                ->where('student_applicants.award_applied', '=', 1);
        })
        ->groupBy('courses.course_code')
        ->pluck('total', 'c.course_code');

        return view('admin.dashboard', ['data' => $data]);

I am aiming for the following format:

[
  "BSA",
  0
], 
[
  "BSBA-HR",
  0
],

This is the current output in JavaScript and Laravel:

https://i.sstatic.net/c3kZo.png

https://i.sstatic.net/KbCFx.png

Answer №1

If my understanding is correct, you are looking for an array of arrays containing a single pair of key and value.

Take a look at this solution:

$dataMapped = $data->map(function($key, $value){
    return [$key => $value];
});
return view('admin.dashboard', ['data' => $dataMapped]);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to convert a string to a float using JavaScript within an HTML document and then calculate the square root?

Recently started learning JavaScript and facing an issue. I'm trying to create a program where the user inputs a number into a text box, clicks a button, and then an alert box displays the Square Root of their number. However, whenever the alert appea ...

Using Google Cloud Function to write and read a JSON file

I'm currently tackling a project that involves comparing two JSON files fetched at different time intervals. Essentially, it's a continuous cron job that retrieves a new JSON response from an API every 20 seconds and compares it with the previous ...

A-frame examples connected to network experiencing issue with toggling video functionality

I have been experimenting with the Networked A-frame examples project and created a remix of it. I encountered an issue where the toggle video button at the bottom left corner of the screen is not functioning properly in the video example. Although the fu ...

Automate the login process for a website and programmatically fill out and submit a form

I am currently trying to automate the login process on Skype's website using Selenium in C#. Everything goes smoothly until I reach the password field, which seems to be elusive to Selenium. I have tried various methods to locate the password field bu ...

Discover the process of connecting a REST controller with AngularJS and Spring

I have a list of file paths stored in an array within the scope variable of an AngularJS Controller. My goal is to properly map these file paths to a Java REST controller for further processing. When I pass it as "/ABC/Scope-Variable," it successfully ma ...

Establish a variable in XSL to define the tabIndex

My XSL code has been designed to read an XML file and generate input elements of type text for each child node. The XML file structure is as follows: For node c, two input boxes are created in the format: Label(com 1) :input box--------------------- Label ...

The Material-UI Button isn't able to trigger when the Popover is closed

Currently, I am working with Material-UI 4.11 and have implemented a Popover component along with a Button: Popover and Button <Popover id={id} open={open} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: ...

Using type conversion dynamically within a select query

I have completely revised my question due to an inaccurate description of the issue! We need to store a wide range of information about a specific region in a data structure that allows for flexibility without limiting user possibilities. To achieve this ...

Encountering an issue in AngularJS where a necessary dependency cannot be resolved while attempting to utilize a global service

In order to streamline my code, I decided to create a service for a function that is utilized in multiple controllers. To achieve this, I added a commonService.js file to my index.html 'use strict'; var myApp = angular.module('myAppName&ap ...

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

Using PHP to create an Associative Array from a Database Query

I need to extract specific data from my database and organize it in a way that allows me to retrieve one field based on another. My thought process looks like this: while($row = mysqli_fetch_assoc($result)) { $aa = $row["field1"]; $bb = $row["fie ...

Implementing a long press feature for a stopwatch in React

I'm facing a dilemma with this particular issue. Before reaching out here, I scoured the community and found numerous solutions for handling long press events in React, but they all seem to focus on click button events. Currently, I am devising a sto ...

An error popped up out of the blue while attempting to execute Webpack

Looking to deploy my React website on IIS but encountering an error when running npm run build:prod. The error message states: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type. Below is the snippet fro ...

Is it possible to iterate through an array of elements and then multiply each of them by a

Suppose I have an array structured like this: [ 0 => [ 'sheet' => 'SUB-ARYA' 'int' => 1 'supplier_name' => 'TON DONG A CORPORATION' 'contract_no' => 'D606D17LS ...

The infinite scroll feature on Next.js resulted in duplicating the last element during the initial fetch process

I have a project that involves fetching data from Strapi Rest API using Next.js. I am fetching and displaying cards based on the fetched content. To prevent loading all the data at once, I have implemented an infinite scroll feature using react-infinite-sc ...

Utilizing Vue.js 2.x to send a REST API request with a collection of objects

I currently have an array of objects stored in state, and my goal is to send this entire structure to a back end API for processing and receive a new set of values in return. Below is a simplified representation of this structure as viewed in the develope ...

I am having trouble removing an item from my NSMutableArray

I've been struggling to solve a coding problem. In my array NSMutableArray *array, I have the values (@ "1", @ "2", @ "3", @ "4", @ "5"). After removing the first element, I expect to have an array with values (@ "2", @ "3", @ "4", @ "5"), where @"2" ...

What is the best way to expand the subcategories within a list?

I have successfully implemented a script to open my hamburger menu. However, I am facing an issue with subitems as some list items contain them. How can I modify the script to ensure that the subitems expand when clicked instead of just hovering? functi ...

I have to ensure that a plugin is only loaded once its dependency has been loaded with RequireJS

Currently, I am utilizing the jquery.validationEngine.js plugin and facing an issue. It seems that jqueryValidateEnglish is unable to function properly unless jqueryValidateEngine is loaded beforehand. In my code for jquery.wrapped.validationEnglish2.js, ...

HTML drop-down menu not descending as expected

Recently, I've encountered a simple issue with adding a dropdown menu to the navbar to enable sorting options by price, category, rating, etc. Unfortunately, the dropdown functionality is not working as expected. Despite my efforts to troubleshoot by ...