Displaying Data in SPA Frameworks

Showing data is a common task in any Single Page Application (SPA). In this section, we'll explore how to display data using React, Angular, and Vue.

Displaying Data in React

Here is how you can display our results in React.

import React from 'react';

function App() {
  const data = ["Item 1", "Item 2", "Item 3"];

  return (
    <div>
      <h1>Items:</h1>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Let's take a quick look at the explanation table,

Function	Explanation
const data = ["Item 1", "Item 2", "Item 3"];	Your data
{data.map((item, index) => ( <li key={index}>{item}</li> ))}	Mapping the data and making it visible using <li></li>

Displaying Data in Angular

Here is a simple data visualization in Angular

<!-- app.component.html -->
<div>
  <h1>Items:</h1>
  <ul>
    <li *ngFor="let item of data">{{ item }}</li>
  </ul>
</div>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  data = ["Item 1", "Item 2", "Item 3"];
}

This is how the code works,

Function	Explanation
<li *ngFor="let item of data">{{ item }}</li>	Visualizing the data in <li></li> tag
@Component({ selector: 'app-root', templateUrl: './app.component.html', })	Initializing the components
data = ["Item 1", "Item 2", "Item 3"];	Data to visualize

Displaying Data in Vue

This is how you can visualize data in Vue,

<template>
  <div>
    <h1>Items:</h1>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ["Item 1", "Item 2", "Item 3"],
    };
  },
};
</script>

Let's take a close view of the code,

Function	Explanation
<li v-for="(item, index) in data" :key="index">{{ item }}</li>	Visualizing the data in <li></li> tag
data() { return { data: ["Item 1", "Item 2", "Item 3"], }; }, };	Handles the data