CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-database
FireLordZuko
FireLordZuko

Reputation: 95

How to filter data from an object array according to their property values, in ReactJs?

I wrote a simple code to just pass all the data taken from a firebase real time database into a react component, which is called cubetemplate, via an object array. Here is a screenshot of the firebase I used to do the test:

enter image description here

Here's the code I used:

<div className="gal">
   {Object.keys(this.state.gallery)
   .sort()
   .map(item => {
   //inserting into the component
   return <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
   })}
</div>

Now, the problem is that, I want to pass only the objects which verify the condition "type"="vid", into the Cubetemplate component. How do I accomplish this?

Here's the full code to take a better understanding of the situation:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Cubetemplate from './components/cubes/Cubetemplate';
import './Gallery.css';
import * as firebase from 'firebase';

class Gallery extends Component {

  //this is the place where you declar your vars
  constructor(props) {
      super(props);
      this.state = {
          loading: false,
          list: [1, 2, 3],
          value: '',
          gallery:{},
          isLoggedIn: false,
      };
      this.readDB = this.readDB.bind(this); //no idea what the hell this is

  }


readDB() {
 
  var that = this;

  var starCountRef = firebase.database().ref("/gallery");


  //the values from the firebase will be printed in the console
  starCountRef.once('value', snapshot => {
      snapshot.forEach(function (childSnapshot) {
          var childKey = childSnapshot.key;
          var childData = childSnapshot.val();

          console.log("Key: " + childKey + " Title: " + childData.title);

      });
      that.setState({ isLoggedIn: true });


      //just to check the values of snapshot
      // console.log(snapshot.val());

      //takes the data from friebase to snapshot to news.
      this.setState({ gallery: snapshot.val() });
      console.log(this.gallery);

  }, err=> {

    //errors
      console.log(err);
  });
};


componentDidMount(){
  this.readDB();
};

render() {
  return (


  
    <div className="gallerycontainer">       

      <div className="gal">
      
        {Object.keys(this.state.gallery)
        .sort()

        //map
        .map(item => {

          //inserting into the component
          return <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
        
        })}

      </div>
    </div>

  );
 }
}
    
export default Gallery;

Thanks in advance stackoverflowers!

Upvotes: 0

Views: 693

Answers (2)

notnavindu
notnavindu

Reputation: 517

You could use firebase filtering like Frank mentioned or you could simply do some conditional rendering like this:

<div className="gal">
{Object.keys(this.state.gallery)
   .sort()
   .map(item => {
   //Only render if the item type is 'vid'
   if (this.state.gallery[item]["type"] == "vid") {
       <Cubetemplate source={this.state.gallery[item]["img"]} key={item}/>;
   }

   })}
</div>

Upvotes: 1

Frank van Puffelen
Frank van Puffelen

Reputation: 599956

To load only the gallery child nodes with type equal to vid, you'd use a Firebase query like this:

var galleryRef = firebase.database().ref("/gallery");
var query = galleryRef.orderByChild("type").equalTo("vid");

query.once('value', snapshot => {
  ...

For more on this, I highly recommend studying the Firebase documentation on ordering and filtering data.

Upvotes: 1

Related Questions