Taking data from Vue, uploading it to a Springboot api, and saving that data in a specific format to-CodePudding

I'm trying to save the output of my stream to an s3 bucket, as an excel file. All this works fine, but for some reason when it saves the stream it all shows on one long line in the file.

Is there a way in JavaScript to make it skip a line at the end of every array element?

JS code to push into an array -

// Data for s3 bucket transfer
this.s3Data.push(`Longitude: ${this.lng}, Latitude: ${this.lat}, Uncertainty Radius: ${this.uncertainty_radius} meters, Address: ${this.place_name}, Source: TEXT\n`)
this.s3Data = JSON.parse(JSON.stringify(this.s3Data))

Method to upload code to s3 -

uploadToS3() {
  axios.post("/api/v1/targetLocation/uploadLocationsToS3Bucket", this.s3Data,
      {headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' auth}})
},

Vue -

export default {
  data() {
    return {
      place_name: "",
      lat: '',
      lng: '',
      uncertainty_radius: 0,
      speed: 0,
      altitude: 0,
      s3Data: [],
    }
  },
}

Springboot backend -

public void uploadLocationsToS3Bucket(InputStream file) {
    try {
        BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
        AmazonS3 s3Client = AmazonS3ClientBuilder
                .standard()
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
                .withRegion(awsRegion)
                .build();

        String fileName = connectionRequestRepository.findStream()  ".xls";
        String bucketName = "downloadable-cases";
        s3Client.putObject(new PutObjectRequest(bucketName, fileName, file, new ObjectMetadata()));
    } catch (AmazonServiceException ex) {
        System.out.println("Error: "   ex.getMessage());
    }
}

public String downloadSearchData() throws IOException {
    BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
    AmazonS3 s3Client = AmazonS3ClientBuilder
            .standard()
            .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
            .withRegion(awsRegion)
            .build();

    var s3Object = s3Client.getObject("downloadable-cases", connectionRequestRepository.findStream()  ".xls");
    var out = new ByteArrayOutputStream();
    try (var in = s3Object.getObjectContent()) {
        in.transferTo(out);
    }
    return out.toString();
}

Example of how I want this -

"Longitude: -80., Latitude: 25., Uncertainty Radius: 11.61 meters, Address: ***, Florida 33130, United States, Source: TEXT",

CodePudding user response：

My understanding of this question is that the goal is to take data from the front-end and save it as CSV data to s3. Lets start with the front-end:

this.s3Data.push({
  'Longitude': this.lng,
  'Latitude': this.lat,
  'Uncertainty Radius': `${this.uncertainty_radius} meters`,
  'Address': this.place_name,
  'Source': 'TEXT'
})

This will construct an array of structured data, which is exactly what we want, because on the backend, we can then look at the data and easily tell what is what. This creates a good json structure, that is easy to use later, for any purpose. (Usually though, the JSON "keys" (the part before the :) are lowercase and one word, but that's not required).

Your code for sending the json data to the api remains the same.

so let's look at the backend now:

public void uploadLocationsToS3Bucket(InputStream file) {
    try {
        BasicAWSCredentials awsCredentials = new BasicAWSCredentials(awsAccessKey, awsSecretKey);
        AmazonS3 s3Client = AmazonS3ClientBuilder
                .standard()
                .withCredentials(new AWSStaticCredentialsProvider(awsCredentials))
                .withRegion(awsRegion)
                .build();

        // parse the json into data
        JsonNode jsonTree = new ObjectMapper().readTree(file);

        // this builder is what converts the json data to csv data
        Builder csvSchemaBuilder = CsvSchema.builder();

        // grab the names of each column from the first json object
        JsonNode firstObject = jsonTree.elements().next();
        firstObject.fieldNames().forEachRemaining(fieldName -> {csvSchemaBuilder.addColumn(fieldName);} );

        //create a "schema" using those column names
        CsvSchema csvSchema = csvSchemaBuilder.build().withHeader();
        
        // convert from json to csv, using the schema we just generated
        CsvMapper csvMapper = new CsvMapper();
        String csvData = csvMapper.writerFor(JsonNode.class)
          .with(csvSchema)
          .writeValueAsString(jsonTree);

        String fileName = connectionRequestRepository.findStream()  ".xls";
        String bucketName = "downloadable-cases";
        // put a string instead of a stream
        s3Client.putObject(bucketName, fileName, csvData);
    } catch (AmazonServiceException ex) {
        System.out.println("Error: "   ex.getMessage());
    }
}

This should create csv from your json input, that you can use in excel easily. You also need to add Jackson to your backend. I cribbed most of this from a tutorial that explains a lot of this in more detail.

Note that the output will be csv style, so it will look like this:

Longitude,Latitude,Uncertainty Radius,Address,Source
123445,32454,"1.25 meters","Some Place","TEXT"
324233,23443,"3.25 meters","Someother Place","TEXT"