Fetch and map JSON in different frameworks

gistfile1.txt

# Fetch and map JSON in different frameworks 

## React:

```jsx

import React, { useEffect, useState } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

```

## Angular
```ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let item of data">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
    </div>
  `
})
export class AppComponent implements OnInit {
  data: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<any[]>('https://api.example.com/data')
      .subscribe(data => this.data = data);
  }
}
```

## Vue
```html

<template>
  <div>
    <div v-for="item in data" :key="item.id">
      <h2>{{ item.title }}</h2>
      <p>{{ item.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      });
  }
};
</script>
```

## Svelte

```html

<script>
  import { onMount } from 'svelte';

  let data = [];

  onMount(async () => {
    const response = await fetch('https://api.example.com/data');
    data = await response.json();
  });
</script>

{#each data as item (item.id)}
  <div>
    <h2>{item.title}</h2>
    <p>{item.description}</p>
  </div>
{/each}
```

## EHTML

```html

<e-json
  data-src="https://api.example.com/data"
  data-response-name="response"
  data-actions-on-response="mapToTemplate('#template', response)">
  
  <template id="template" data-object-name="item">
    <div>
      <h2 data-text="${item.title}"></h2>
      <p data-text="${item.description}"></p>
    </div>
  </template>
</e-json>
```