Kann ich Felder aus assoziierten Modellen in reaktiven Komponenten aufrufen?

Question

Gibt es eine Möglichkeit, Felder aus assoziierten Modellen in reaktiven Komponenten in Schienen zu bekommen?

Ich habe Listing-Modell, das ich durch in der Komponente reagieren und alle Felder innerhalb jedes Datensatzes einschließlich der ID des Modells, das mit dem Listing-Modell, das ich bekomme, verbunden sind.

Was ich will, gezielt erreichen, ist ein anderes Feld durch die zugehörige ID zu erhalten, die ich in der Auflistung Modell habe, aber ich bin es nicht nur immer, wie wir in Schienen zu tun, zum Beispiel

listing.modelNameThatIsAssociated.fieldName 

Wie Dies erreichen?

hier ein Ausschnitt aus meinem Code

Controller

def all 
begin 
    @listings = Listing.all 
rescue => e 
    @listings = [] 
end 
end 

def filter 
@listings = Listing.where(nil) 

filtering_params(params).each do |key, value| 
    @listings = @listings.public_send(key, value) if value.present? 
end 
render json: { listings: @listings }, status: 200 
end 

private 
def filtering_params(params) 
    params[:filters].slice(:bedrooms, :bathrooms, :price, :parking) 
end 

all.html.erb

<%= react_component('ListingsPage', listings: @listings) %> 

Und hier Meine reagieren Komponente (listings.js.jsx)

class ListingsList extends React.Component { 
    constructor(props) { 
     super(props); 
} 

render() { 
    const { listings } = this.props; 

    return (
     <div className='ListingList_container'> 
     <table> 
      <thead> 
      <tr> 
      <td>#</td> 
      <td>Name</td> 
      <td>Address</td> 
      <td>Lat</td> 
      <td>Lng</td> 
      <td>Bedrooms</td> 
      <td>Bathrooms</td> 
      <td>Price</td> 
      <td>Parking</td> 
      <td>Building ID</td> 
      </tr> 
     </thead> 
      <tbody> 
      { 
      listings.map((listing, index) => (
       <tr key={listing.id}> 
       <td>{index + 1}</td> 
       <td>{listing.name}</td> 
       <td>{listing.address}</td> 
       <td>{listing.lat}</td> 
       <td>{listing.lng}</td> 
       <td>{listing.bedrooms}</td> 
       <td>{listing.bathrooms}</td> 
       <td>{this.formatNumber(listing.price)}</td> 
       <td>{listing.parking ? 'Available' : 'None'}</td> 

       // below I want to get building name just like we do in rails 
       // through association 'listing.building.name' but, that 
       // doesn't work 
       <td>{listing.building_id}</td> // this works, I am getting building ID 
       <td>{listing.building.name}</td> // this doesn't work 
       </tr> 
      )) 
      } 
     </tbody> 
     </table> 
    </div> 
); 
} 
} 

Ich schätze jede einzelne Ansicht und danke im Voraus. Bitte lassen Sie mich wissen, wenn meine Frage nicht klar ist.

Answer 1

Hier finden Sie die Verbände zunächst geladen werden müssen, verwenden Sie dann die Option include in as_json sie mit dem Ausgang JSON

Zum Beispiel hinzuzufügen, wenn Ihr Listing Modell has_many :offers und has_many :views, dann würde schreiben Sie dies:

# In the controller 
@listings = Listing.preload(:offers, :views) 

# In your view 
<%= react_component(
    'ListingsPage', 
    listings: @listings.as_json(include: [:offers, :views]) 
) %>