Question

我正在尝试创建django react应用。我试图从Django提取数据以作出反应。我被困在需要遍历多个数组的地方。

这是我的序列化程序。py

class ServiceSerializer(serializers.ModelSerializer):
    class Meta:
        model = Service
        fields = ('id', 'title', 'description')


class TechnologiesAndFrameworkSerializer(serializers.ModelSerializer):
    class Meta:
        model = TechnologiesAndFramework
        fields = ('id', 'title', 'description', 'service')

这是我的模特。py

 class Service(models.Model):
    title = models.CharField(blank=False, null=False, max_length=256)
    description = models.CharField(blank=False, null=False, max_length=256)

    def __str__(self):
        return self.title

 class TechnologiesAndFramework(models.Model):
    title = models.CharField(blank=False, null=False, max_length=256)
    description = models.CharField(blank=False, null=False, max_length=256)
    service = models.ForeignKey(Service, on_delete=models.CASCADE, null=True)

    def __str__(self):
        return self.title

这是我的views.py

  class ServiceViewSet(viewsets.ModelViewSet):
      serializer_class = ServiceSerializer
      queryset = Service.objects.all()
      permission_classes = [permissions.AllowAny]


   class TechnologiesAndFrameworkViewSet(viewsets.ModelViewSet):
      serializer_class = TechnologiesAndFrameworkSerializer
      queryset = TechnologiesAndFramework.objects.all()
      permission_classes = [permissions.AllowAny]

因此在后端，服务模型具有

前端
后端
部署

我的TechnologiesAndFramework有

Django
反应JS
Docker
W
引导程序
Postgres

我想基于服务来遍历TechnologiesAndFramework。

所以输出应该是这样的。

前端
- 反应JS
- W
- 引导程序
后端
- Django
- Postgres
部署
- Docker

我如何实现这种格式？

目前，这就是我的反应代码

const [service, setService] = useState([]);
  const [framework, setFramework] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8000/api/work/service")
      .then((res) => res.json())
      .then(setService);
    fetch("http://localhost:8000/api/work/f&t")
      .then((res) => res.json())
      .then(setFramework);
  }, []);

  <div className="progress-bars">
            {framework &&
              service &&
              framework.map((item, index) => {
                console.log(framework)
                return (
                  <>
                    <h1>{service[item]}</h1>
                    <h1>{item.title}</h1>
                  </>
                );
              })}
          </div>

任何帮助将不胜感激。预先感谢。

Answer 1

在Django中，如果两个模型之间存在 1-M关系，则Django将添加一个属性，以便您 1模型来访问与 M相关的对象，它始终带有名称x_set，其中x -> the model name lowercase，并且您也可以对其进行重命名，以便使用适当的名称进行访问。

所以我建议您重命名models.py中的属性：

...

 class TechnologiesAndFramework(models.Model):
    ...
    # like this, just add related_name attribute.
    service = models.ForeignKey(Service, on_delete=models.CASCADE, null=True, related_name='technologies')
....

现在makemigrations和migrate

现在，在添加related_name之后，只需在ServiceSerializer中引用它即可，SlugRelatedField如下所示：

class ServiceSerializer(serializers.ModelSerializer):
    technologies = serializers.SlugRelatedField(read_only=True, many=True, slug_field='title')
    class Meta:
        model = Service
        fields = ('id', 'title', 'description', 'technologies')

现在您的回复应如下所示：

[
 { 
    "id": "your_service_id", 
    "title": "backend for example", 
    "description": "Your description",
    "technologies": [
        "Django", "Postgres", ...
    ]
 },
....
]

如何基于外键选择遍历多个数组

1 个答案: