Fetching image URL via an AJAX request with CarrierWave

When using an API requested through ajax, the query returns a collection that is serialized into json before being sent back to the client. Each record in the collection has a photo URL assigned by Carrierwave. This seems like a standard process.

However, when checking in the Rails console, the full public URL of each photo in Google Cloud Storage is retrieved, whereas on the client-side response, only a partial URL like "uploads/..." is received from the array of objects. I need the complete URL, similar to what is displayed in the console, to be parsed and included in the returned JSON.

How can I achieve this?

controller.rb

def get_filtered
  ...
  # query is performed
  ...
  render json: filtered_properties.as_json
end

On the JavaScript side:

...
properties = response.data
properties[0].photos[0].url // => "uploads/property/photos/photo1.jpg"

Although in the rails console, I can see the complete public URL leading to my Google Cloud Storage folder.

Answer №1

Ensure you specifically define it:

config/envrionments/[environment].rb

config.asset_host = 'http://example.com'

Answer №2

To streamline my process, I turned to the active_model_serializers gem, which simplifies JSON response manipulation. Check out this informative video by Ryan Bates on the topic: here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Employing AJAX GET to create CSRF secured forms on a cached webpage

Having encountered issues with excessive time spent on database access and slow template processing on some pages, I decided to implement caching using django-cacheops with Redis. However, this also means that POST forms utilizing csrf tokens will be cache ...

Managing dependencies with Yarn or npm

While experimenting with remix and mui v5, I encountered some issues. When using npm and running npm run dev, I received the following error: Error: Directory import '.../playground/remix-mui-dev/node_modules/@mui/material/styles' is not supporte ...

Automated pagination in Jquery running seamlessly

I have successfully created pagination using jQuery. Although the script is functioning properly, I now want it to automatically switch between different pages: <script> $(document).ready(function(){ $("#article_load_favourites").load("indexer_favo ...

What are the steps to start using the Intersection Observer API right away?

Utilizing the Intersection Observer API, I can accurately determine whether an element is within the viewport or not. Is there a way to utilize the Intersection Observer API to detect if an element is in the viewport without relying on a callback function ...

How to utilize View as a substitute for the div tag in your Web Project

Undoubtedly, when working on a web project, it is common practice to use the div element like this: <div> sample text </div> However, using div in React Native can lead to errors: <View> sample text </View> Is there a way to ...

Record AJAX replies similarly to Firebug using the C# WebBrowser component

I am looking to capture the AJAX Response of a website without waiting for the manipulated DOM Document to be fully completed. I want to capture the response similar to how it is done in the Firebug console. Thanks, Chris ...

showing information from a table column

Utilizing the jQuery DataTables plugin with a JSF <h:dataTable>. The page contains 86 records. +++++++++++++++++++++++++++++++++++++ + SN. + Name + Email + +++++++++++++++++++++++++++++++++++++ + 1 + Name 1 + Email 1 + + ...

Tips for preserving the status of a sidebar

As I work on developing my first web application, I am faced with a navigation challenge involving two menu options: Navbar Sidebar When using the navbar to navigate within my application, I tend to hide the sidebar. However, every ti ...

window.print function appears multiple times

Looking for help with a sample script I have that prints a section of my website page when a button is clicked. The issue arises when using ajax to transition and clicking the same button results in window.print activating multiple times. How can I ensur ...

Unable to refresh data dynamically in pagination using DataTables

Currently, I am implementing a Datatable plugin to enable pagination on my HTML table. Within the table, there is a checkbox for selecting rows and each row possesses a unique ID. However, I am facing an issue when attempting to update cells of a specific ...

What is the best way to navigate and map through an array of objects, especially when encountering an empty object?

I am currently in the process of developing a bootleg version of Amazon with a focus on creating the Questions & Answers component. The issue I have encountered is that in my dummyData, there are instances where a product may not have any questions, lead ...

Transfer the layout from one HTML file to multiple others without the need to retype the code

I am working on developing an e-commerce website with HTML/CSS. My goal is to have a consistent template for all product pages that are accessed when clicking on a product. However, I do not want to manually code each page using HTML and CSS. Is there a mo ...

Using jQuery to redirect a page based on the IP address of the visitor

I am looking to implement Jquery code on the index page of www.propertyhere.com The aim is to redirect visitors based on their geographical IP location to specific pages: if the user's IP is from AU: http://www.propertyhere.com/Country/AU/search-t ...

What are the steps to integrate the aws-iot-device-sdk NPM module with Angular 11? I am encountering errors related to fs, path, and tls during the build process

I manage a browser-based Angular application that was previously on version 5.6. This app consists of two components that subscribe to an IOT topic and listen for updates without publishing. The task at hand is to upgrade to Angular 11.0.3, which I have c ...

Avoid receiving a 404 error when using an invalid ID

When trying to set up my workoutId param, I encounter the following error: UnhandledPromiseRejectionWarning: CastError: Casting to ObjectId failed for value "5fb02bd8b61abc02" at path "_id" for model "Workout" If the workou ...

Steps to create a dynamic Datatable using Jquery

Can someone please help me create a dynamic table using Jquery DataTables? I specifically need the table to be of type Server-side processing, where all the columns are generated in the same Ajax request along with the results. DataColumns = "" //JSON res ...

Unable to extract property from object in context due to its undefined status

Having trouble with the useContext hook in my React app for managing the cart state. Keep getting an error stating that the function I'm trying to destructure is undefined. I'm new to using the context API and have tried various solutions like e ...

Is the process.env.NODE_ENV automatically set to 'production'?

While examining someone else's code, I noticed this particular line. if (process.env.NODE_ENV === 'production') { ... The application in question is a node.js app with express server and reactjs front-end. If we were to deploy it on Heroku ...

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

What is the best way to retrieve the value of an nth column in a table using

Is there a way to retrieve the value of a specific column in a table? For example, I want to get the value of the 2nd column. I have no trouble getting the first one using this method - it works perfectly fine. However, when I try to retrieve the value of ...