# How to convert this data into a JSON Object to send through API?

**URL:** <https://forum.freecodecamp.org/t/how-to-convert-this-data-into-a-json-object-to-send-through-api/374913>\
**Category:** General\
**Created:** [April 17, 2020, 8:39pm UTC](https://forum.freecodecamp.org/t/how-to-convert-this-data-into-a-json-object-to-send-through-api/374913 "2020-04-17T20:39:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Onpointiscake](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/onpointiscake/32/112084_2.png) [@Onpointiscake](https://forum.freecodecamp.org/u/Onpointiscake)\
**Post date:** [April 17, 2020, 8:39pm UTC](https://forum.freecodecamp.org/t/how-to-convert-this-data-into-a-json-object-to-send-through-api/374913/1 "2020-04-17T20:39:34Z")

</div>

I have been trying to solve this issue for some hours already and I can´t wrap my mind about what I should really do guys:

Basically I have the following code where first I get some data (first `urls` and then `urls.location`), and then I´ll try to send this `arrayphotos ` array as an object through an API `patch` request.

```auto
uploadPhoto(e){
       
        let arrayphotos = [{}]
        new Promise(function() {
            
            for(let i= 0; i<e.target.files.length; i++){
                ReactS3.uploadFile(e.target.files[i], s3configUpload)
                .then((urls) => {
                    
                    arrayphotos.push((urls.location))
                })
                .catch((err) => {alert(err)})
            }
            console.log(arrayphotos)
          }).then(
            
            axios.patch(`${apiGatewayDevStage}/add-pictures`, {
                site: this.props.match.params.gallery_name + "_" + this.state.authenticatedUser,
                photos: arrayphotos
            }).then(() => {
                console.log('DB-Galleries en Dynamo updated')
            }).catch(err => console.log(err))
           
          )
        
    }

```

I think where the problem is that the function is sending three objects (three photos ulrs) instead of sending in one object the three urls. When I console log after the arrayphotos is completed, this is what it appears:

![photofreeCode](https://global.discourse-cdn.com/freecodecamp/original/3X/f/8/f83a06b394844ff85b131a958ff5fd4a53452345.jpeg)

So basically I guess that because the array is completed with three objects, then the DB just gets an empty array (I guess because of an error, because it doesnt appear any error in the axios error handler tbh).

How can I make the for loop so the array has only ONE object and inside the urls?

---

<div class="post-metadata">

**Author:** ![skaparate](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/skaparate/32/125896_2.png) [@skaparate](https://forum.freecodecamp.org/u/skaparate)\
**Post date:** [April 17, 2020, 9:38pm UTC](https://forum.freecodecamp.org/t/how-to-convert-this-data-into-a-json-object-to-send-through-api/374913/2 "2020-04-17T21:38:50Z")

</div>

Hello!

I think the problem lies with how you’re uploading the files.

When you execute this:

```auto
for(let i= 0; i<e.target.files.length; i++){
                ReactS3.uploadFile(e.target.files[i], s3configUpload)
                .then((urls) => {
                    
                    arrayphotos.push((urls.location))
                })
                .catch((err) => {alert(err)})
            }

```

You’re basically iterating and uploading each file without waiting for the response. The problem with this is that the `for` loop doesn’t wait and executes the next step until it finishes, while the file may or may not have been uploaded.

Did you check the console to see the output? Does `console.log(arrayphotos)` show anything?

On the other hand, is the `axios.patch` even executing? I don’t think so 😛, because for the next `then` to execute on a chained promise, the previous step must return a promise, which is not the case 😅.

[Look at this example and see the console](https://jsfiddle.net/skaparate/dg4jot0z/14/) (press F12 or Control + Shift + i and click on the Console tab). Pay extra **attention to the order of the console messages**. This will become a problem when your uploads get bigger (in size, I mean) and you will not even notice it (a silent bug).

A solution I have used in the past is using recursion. The idea is to call a function that uploads the first file and then calls itself, uploading each file until there are no more files to upload.

**Hint**

Since we’re here to learn, you may want to build your own solution, but I’ll leave an implementation that I’ve used in the past to give you an idea (it’s not tested so be careful)

```auto
function myUpload(files, config, done, result = [], index = 0) {
  // When the index is equal or greater to the length of the files array
  if (index >= files.length) {
    // call the done function, which should trigger the next step
    return done(result);
  }
  const currentFile = files[index];
  S3.uploadFile(currentFile, config).then((url) => {
    result.push({ status: "ok", error: null, file: url.location });
    myUpload(files, config, done, result, index++);
  }).catch(e) => {
    result.push({ status: "failed", error: e, file });
    myUpload(files, config, result, index++);
  });
}

// On the main function
function main() {
  return new Promise(() => {
    myUpload(e.target.files, s3config, (uploadResult) => {
      // Now you can pass the upload result to axios patch.
    });
  });
}

```

Of course, this is not tested and not the only way, but it should give you an idea 🙂.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:58pm UTC](https://forum.freecodecamp.org/t/how-to-convert-this-data-into-a-json-object-to-send-through-api/374913/3 "2021-06-01T18:58:20Z")

</div>