Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – New data not showing up in frontend

I am using django for the backend and next.js for my frontend

I have a table called Person in my database, which I recently modified and added two new values: `government_id and fiscal_address.

my django model looks like this:

class Person(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    user = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.EmailField()
    country_code = models.CharField(max_length=5)
    area_code = models.CharField(max_length=5)
    phone_number = models.CharField(max_length=20)
    fiscal_address = models.TextField(null=True)
    government_id = models.CharField(max_length=100, null=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
    created_by = models.CharField(max_length=100)
    updated_by = models.CharField(max_length=100, null=True)

I also have defined the model in my frontend like this:

import User from "../User/User";

export default interface Person {
  id: string;
  user?: User;
  firstName: string;
  lastName: string;
  email: string;
  countryCode: string;
  areaCode: string;
  phoneNumber: string;
  fiscal_address: string;
  government_id: string;
  createdAt: string;
  updatedAt: string;
  createdBy: string;
  updatedBy: string;
}

Now, the issue comes when I try to access the two new values I just mentioned. By example, I call an endpoint to obtain a person and want to print its values. If I return this:

(...)
<div className="flex items-center justify-between text-m">
  <p className="text-gray-500">Name</p>
  <p className="text-right">{person.firstName} {person.lastName}</p>
</div>

<hr className="border-gray-200 mt-2 mb-1" />

<div className="flex items-center justify-between text-m">
  <p className="text-gray-500">Fiscal address</p>
  <p className="text-right">{person.fiscal_address}</p>
</div>

person.firstName and person.lastName will print the correct values, but person.fiscal_address will be empty, even if the values do exist in the database and when I check the return value from my endpoint in postman fiscal_address is there.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found the solution! Somewhere in my frontend there's a configuration to parse from camelCase to snake_case and viceversa. so in my frontend model the names had to be fiscalAddress and governmentId.


  2. 0

    The front end is just displaying what you give it. I cant comment on why it’s not giving you the new 2 values, but your interface/type is incorrect as a few fields could be null from your class definition (null=True).

    I can only help fix what’s included in the question so this is what your interface should be, this would be a good start:

    import User from "../User/User";

export default interface Person {
  id: string;
  user?: User | null;
  firstName: string;
  lastName: string;
  email: string;
  countryCode: string;
  areaCode: string;
  phoneNumber: string;
  fiscal_address: string | null;
  government_id: string | null;
  createdAt: string | null;
  updatedAt: string;
  createdBy: string;
  updatedBy: string | null;
}

    hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search