Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

Question

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this.

Below is an example of my controller:

public function index(Request $request)
{
    if($request->has('search'))
    {
        $student_data = \App\Student::where('name','LIKE','%'.$request->search.'%')->get();
    }
    else
    {
        $student_data = \App\Student::all();
    }

    return response()->json(array('student_data' => $student_data));
}

javascript jquery laravel typescript

Answer 1

Answer №1

Avoid using ajax, instead directly display the json on the page as a javascript variable

public function show(Request $request)
{
    if($request->has('search'))
    {
        $students_data = \App\Student::where('name','LIKE','%'.$request->search.'%')->get();
    }
    else
    {
        $students_data = \App\Student::all();
    }
     $students_data = $students_data->toJson();


    return view('show',compact('students_data'));
}

In your view, you can simply use

<script>
var students_data = {{$students_data}};
</script>

Answer 2

Avoid using ajax, instead directly display the json on the page as a javascript variable

public function show(Request $request)
{
    if($request->has('search'))
    {
        $students_data = \App\Student::where('name','LIKE','%'.$request->search.'%')->get();
    }
    else
    {
        $students_data = \App\Student::all();
    }
     $students_data = $students_data->toJson();


    return view('show',compact('students_data'));
}

In your view, you can simply use

<script>
var students_data = {{$students_data}};
</script>

Answer 3

Answer №2

The best way to accomplish this task is by utilizing an ajax request. If you prefer using vanilla JavaScript, you can make use of the Fetch API

const response = await fetch('http://example.com/movies.json');
const myJson = await response.json();
console.log(JSON.stringify(myJson));

In your specific scenario, you will be able to retrieve the data_siswa array by accessing myJson.data_siswa

Answer 4

The best way to accomplish this task is by utilizing an ajax request. If you prefer using vanilla JavaScript, you can make use of the Fetch API

const response = await fetch('http://example.com/movies.json');
const myJson = await response.json();
console.log(JSON.stringify(myJson));

In your specific scenario, you will be able to retrieve the data_siswa array by accessing myJson.data_siswa

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

Answer №1

Answer №2

Similar questions

Is the data missing in the initial request?

Struggling to link variables and functions to an angularJS controller

Challenges with managing jQuery's .blur() and .focus() events

Exploring the source code of NPM public and private packages within the node_modules directory

The react-bootstrap implementation is not functioning as expected, resulting in an unsupported server component error

Identify the general type according to a boolean property for a React element

Convert HTML to JSON using a selection

Convert the generic primitive type to a string

Trouble with implementing web methods through AJAX communication channel

Using Reactjs to set state with a dynamically generated key-value pair

Ways to parse the data from a response received from an Axios POST request

Converting Angular object into an array: A step-by-step guide

I want to know how to shift a product div both horizontally and vertically as well as save its position in And Store

An ambient module will not be successfully resolved through a relative import operation

Typescript's way of mocking fetch for testing purposes

What is the process for generating an object type that encompasses all the keys from an array type?

What causes errors in jQuery ajax jsonp requests?

What prevents certain scenarios from being encapsulated within a try/catch block?

What is preventing me from retrieving the values of selected options in jQuery when clicking on an option?

Leveraging jQuery alongside HTML5 Video