How do I display data in a Blade template using {{ ... }}?
Jun 18, 2025 am 12:32 AM
To display data in a Blade template using {{}}, first pass the data from your controller to the view, then echo it with double curly braces. 1. In the controller, use return view('view-name', ['variable' => value]) to send data. 2. In the Blade file, access the variable via $variable. 3. Use {{ $variable }} to output strings, numbers, or results of simple PHP expressions. 4. For arrays or objects, access keys or properties directly like $array['key'] or $object->property. 5. To render raw HTML, use {!! !!} instead of {{}} but only when the source is trusted to avoid XSS risks. This method ensures safe and effective data display in Laravel Blade templates.
To display data in a Blade template using {{ ... }}, you simply pass the data from your controller to the view and then echo it out with the double curly braces. Blade automatically escapes any HTML characters to prevent XSS attacks, which is good for security.
Passing Data from Controller
Before you can show anything in Blade, you need to send the data from your controller. Here's how that usually looks:
return view('your-view-name', ['name' => 'John']);In this case, 'name' becomes available in your Blade file as $name.
So in your Blade file (your-view-name.blade.php), you'd write:
{{ $name }}And it would output:
John
This is the basic way to show simple variables like strings or numbers.
Showing Simple Variables
If you're dealing with basic values like strings, integers, or even simple arrays, you can directly use {{ }} to display them.
Examples:
{{ $name }} <!-- Outputs: John -->
{{ 2 2 }} <!-- Outputs: 4 -->
{{ count($items) }} <!-- If $items is an array with 3 items, outputs: 3 -->Blade parses what’s inside {{ }} as PHP code, so you can do simple calculations or function calls right there.
Just keep logic minimal in the view — it's better to prepare most data in the controller or model.
Displaying Array or Object Properties
If your variable is an array or an object, you can access its keys or properties directly in Blade.
For example, if you pass this from your controller:
$user = ['name' => 'Alice', 'age' => 30];
return view('profile', ['user' => $user]);You can show individual fields like this:
Name: {{ $user['name'] }} <br>
Age: {{ $user['age'] }}If it's an object instead (like a database model):
$user = User::find(1);
return view('profile', ['user' => $user]);Then you'd access properties like:
Name: {{ $user->name }} <br>
Email: {{ $user->email }}These are common patterns when showing user data, product info, settings, etc.
Avoiding Escaping When Needed
By default, {{ }} escapes HTML to protect against malicious scripts. But sometimes you might want to display actual HTML content — like if you’re pulling formatted text from a CMS or WYSIWYG editor.
In those cases, you can use {!! !!} instead:
{!! $htmlContent !!}This will render raw HTML instead of escaping it.
?? Use with caution — only do this if you fully trust the source of the HTML, otherwise you risk opening up XSS vulnerabilities.
That’s the core of displaying data in Blade using {{ ... }}. You can show simple variables, array values, object properties, and choose whether to escape or not based on context.
The above is the detailed content of How do I display data in a Blade template using {{ ... }}?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use Sankey chart to display data in Highcharts
Dec 17, 2023 pm 04:41 PM
How to use Sankey diagram to display data in Highcharts Sankey diagram (SankeyDiagram) is a chart type used to visualize complex processes such as flow, energy, and funds. It can clearly display the relationship and flow between various nodes, and can help us better understand and analyze data. In this article, we will introduce how to use Highcharts to create and customize a Sankey chart, with specific code examples. First, we need to load the Highcharts library and Sank
How to use histogram to display data in ECharts
Dec 18, 2023 pm 02:21 PM
How to use histograms to display data in ECharts ECharts is a JavaScript-based data visualization library that is very popular and widely used in the field of data visualization. Among them, the histogram is the most common and commonly used chart type, which can be used to display the size, comparison and trend analysis of various numerical data. This article will introduce how to use ECharts to draw histograms and provide code examples. First, we need to introduce the ECharts library into the HTML file, which can be introduced in the following way
How to use stacked charts to display data in Highcharts
Dec 18, 2023 pm 05:56 PM
How to use stacked charts to display data in Highcharts Stacked charts are a common way of visualizing data, which can display the sum of multiple data series at the same time and display the contribution of each data series in the form of a bar chart. Highcharts is a powerful JavaScript library that provides a rich variety of charts and flexible configuration options to meet various data visualization needs. In this article, we will introduce how to use Highcharts to create a stacked chart and provide
How to use Vue to implement statistical charts for large-screen data display
Aug 17, 2023 am 09:54 AM
How to use Vue to implement statistical charts for large-screen data display. In the modern information society, data statistics and visualization have become important means of decision-making and analysis. In order to display data more intuitively, we often use statistical charts. Under the Vue framework, you can easily achieve large-screen data display needs by using some excellent chart libraries. This article will introduce how to use Vue combined with two mainstream statistical chart libraries, echarts and chart.js, to display data. First, we need to install echarts and c for the Vue project
How to use scatter plots to display data in Highcharts
Dec 17, 2023 pm 10:30 PM
How to use scatter plots to display data in Highcharts Preface Highcharts is an open source JavaScript chart library that provides a variety of chart types and powerful customization functions. Among them, scatter plot is a commonly used data visualization method that can show the relationship between two variables and the distribution of variables. This article will introduce how to use scatter plots to display data in Highcharts and provide specific code examples. Step 1: Introduce the Highcharts library
How to use maps to display data in ECharts
Dec 18, 2023 pm 04:09 PM
How to use maps to display data in ECharts ECharts is a powerful data visualization tool that supports a variety of chart types, including line charts, bar charts, pie charts, etc. Among them, map charts are an important component in ECharts and can be used to display the data distribution in various regions. This article will introduce how to use the map function in ECharts and give detailed code examples. Before starting, we need to prepare the following files: echarts.min.js: EChar
Vue3+TS+Vite development skills: how to visualize data display and chart drawing
Sep 12, 2023 pm 06:25 PM
Vue3+TS+Vite development skills: How to perform visual data display and chart drawing Introduction: With the continuous growth of data volume and the complexity of business, visual data display is becoming more and more important in modern front-end development. Vue3, TypeScript (TS) and Vite are currently popular technology combinations in front-end development. For developers, how to use these technologies for visual data display and chart drawing is a key skill. This article will introduce some practical tips and methods to help developers
How to use stacked charts to display data in ECharts
Dec 18, 2023 pm 01:27 PM
ECharts is a very popular visualization library that provides a variety of chart types, including line charts, bar charts, scatter charts, pie charts, and more. Stacked charts are one of the very practical chart types that can help us combine values ??from different data together according to certain rules and visually display their relative sizes and trends. This article will introduce how to use stacked charts to display data in ECharts and give specific code examples. 1. Prerequisite knowledge Before using ECharts to make stacked charts, we need to master
