Display a list in react consuming from API in Laravel

Coimbra
October 10, 2022
144 views
0 votes
2 Answers

import Table from "react-bootstrap/Table";
import axios from "axios";
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";

const endpoint = "http://localhost:8000/api";
const endpointAccount = "http://localhost:8000/api";

const OpportunityShow = () => {
  const [opportunities, setOpportunities] = useState([]);
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    getAllOpportunities();
  }, []);

  useEffect(() => {
    getAllAccounts();
  }, []);

  const getAllAccounts = async () => {
    const response = await axios.get(`${endpointAccount}/accounts`);
    setAccounts(response.data);
    console.log(accounts);
  };

  const getAllOpportunities = async () => {
    const response = await axios.get(`${endpoint}/opportunities`);
    setOpportunities(response.data);
  };

  const deleteOpportunity = async (id) => {
    await axios.delete(`${endpoint}/opportunity/${id}`);
    getAllOpportunities();
  };

  return (
    <div className="d-grid gap-2">
      <div className="row">
        <div className="col-8">
          <Form className="d-flex m-1">
            <Form.Control
              type="search"
              placeholder="Filtro"
              className="me-2"
              aria-label="Search"
            />
            <Button variant="outline-secondary">Search</Button>
          </Form>
        </div>
        <div className="col-4">
          <Link
            to="/opportunity/create"
            className="col-11 btn btn-outline-primary m-1 "
          >
            Create
          </Link>
        </div>
      </div>
      <Table hover className="">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Nome</th>
            <th scope="col">Conta id</th>
            <th scope="col">Conta nome</th>
            <th scope="col">Fase</th>
            <th scope="col">Data Fechamento</th>
            <th className="text-center" scope="col">
              Ações
            </th>
          </tr>
        </thead>
        <tbody>
          {opportunities.map((opportunity) => (
            <tr key={opportunity.id}>
              <th>{opportunity.id}</th>
              <td>{opportunity.nome}</td>
              <td>{opportunity.account_id}</td>
              <td value={opportunity.account_id}>{accounts.nome}</td>
              <td>{opportunity.estagioNome}</td>
              <td>{opportunity.dataApresentacao}</td>
              <td className="text-center">
                <Link
                  to={`edit/${opportunity.id}`}
                  className="btn btn-outline-warning"
                >
                  Editar
                </Link>
                <button
                  onClick={() => deleteOpportunity(opportunity.id)}
                  className="btn btn-outline-danger m-1"
                >
                  Deletar
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default OpportunityShow;

As it is, I can get the account id within opportunities, but I don’t know how to relate it to the account array id and thus return its name along with the opportunity name.

Good morning, how are you?
Dear I have 2 arrays
1 of opportunities and 1 of accounts,
where an account can have multiple opportunities.
Within opportunities I have the account ID. When displaying the opportunity I want to get the account name from the accounts table.
So it is:
Opportunity Name | Account name
On my listing screen.

Answers

- Zoraiz
- October 10, 2022 at 2:41 pm
- 0 votes
0
Since, you’re using laravel, you should retrieve foreign references to other tables in the the same query with their Models, instead of doing it separately and getting 2 different arrays like you are now. Assuming the following is the Model for opportunities table, add a relationship to the accounts table like so:
```
class Opportunity extends Model
{    
    // Assuming you've named your table opportunities 
    protected $table = 'opportunities';

    public function account() {
        // Assuming Account is your model for accounts table
        return $this->belongsTo(Account::class, 'account_id');
    }
}
```
Then you can do something like this to retrieve nested account instances in every opportunity instance inside the /api/opportunities GET endpoint:
```
// Endpoint to get opportunities
public function getOpportunities() {
    return Opportunity::with('account')->get();
}
```
On the frontend, your opportunities array would look something like this:
```
[
    {
        id: 1,
        // Other opportunity properties...
        account: {
            id: 1,
            // Other account properties...
        }
    }
    // Other opportunity instances...
]
```
Login or Signup to reply.