Django - I would like to fill a form with data from an api get request, data will then be reviewed and submitted

My goal is to have the user input a barcode number which is used to make an API JSON fetch from: https://world.openfoodfacts.org/api/v0/product/${barcode}.json

where I will map the data, something like this:

 const OffData = [barcodeData].map((result) => (
            {
            brand: result.brands,
            name: result.product_name,
            allergens: result.allergens,
            barcode: result._id,
            category: result.categories,
            weight: result.product_quantity,
        })

to then fill my product form: (set each input value)

 <div class="flex justify-center space-x-7">
      <div class="card bg-base-200 shadow-2xl w-96 flex flex-row justify-center items-center pb-4 px-2">
        <div class="form-control w-full max-w-xs">
          <label class="label">
            <span class="card-title">Manual entry</span>
          </label>
            <form id="" action="" class="">
              <div class="flex flex-row items-center space-x-4">
                <input id="barcode_lookup" name="" type="number" placeholder="Enter EAN" class="input input-bordered w-full max-w-xs" />
                <i class="fa-solid fa-magnifying-glass fa-lg cursor-pointer" onclick="document.getElementById('barcode_lookup').submit()"></i>
              </div>
              <div class="flex flex-row items-center align-middle space-x-6 px-7 py-2">
                <div class="flex flex-col">
                <input type="text" placeholder="Brand" class="input input-ghost w-full max-w-xs" />
                <input type="text" placeholder="Name" class="input input-ghost w-full max-w-xs" />
                <input type="number" placeholder="Weight" class="input input-ghost w-full max-w-xs" />   
                </div>
                <div class="flex flex-col">
                  <input type="text" placeholder="Category" class="input input-ghost w-full max-w-xs" />
                  <input type="text" placeholder="Allergens" class="input input-ghost w-full max-w-xs" />
                  <label class="input input-ghost cursor-pointer w-full ">
                    <span class="input-ghost">Perishable?</span> 
                    <input type="checkbox" checked="checked" class="checkbox checkbox-xs" />
                  </label>  
                </div> 
            </form>
        </div>
      </div>
    </div>

product form screenshot

which I can later submit to my database

This is my Product Django model:

class Product(models.Model):
    id = models.AutoField(primary_key=True)
    brand = models.CharField(max_length=100)
    name = models.CharField(max_length=100)
    barcode = models.CharField(max_length=100)
    category= models.CharField(max_length=500)
    perishable = models.BooleanField(default=False)
    allergens = models.CharField(max_length=500)
    weight = models.FloatField(default=0)

    def __str__(self):
        return "name:" + self.name + "barcode:" + self.barcode + "category:" + self.category + "perishable:" + str(self.perishable) + "weight:" + str(self.weight)  + "id:" + str(self.id) + "created_at:" + str(self.created_at) + "updated_at:" + str(self.updated_at)

any help would be much appreciated.

I would suggest using the javascript .fetch() API, here is an example:

fetch(`https://world.openfoodfacts.org/api/v0/product/${barcode}.json`)
  .then(response => response.json())
  .then(data => fillForm(data));

By the way, the javascript .map() function is generally used to apply functions etc. to each member of any array - it doesn't map variables in the literal sense of the word. The data you receive from .fetch() should be a JSON object that you can access like an array and pass to your form in a fillForm like function.

I would then pass this to a Django form which can handle the request.POST and save the info to your database.

Back to Top