CODEWITHSUNDEEP
javascriptreactjs
Tyler Zika
Tyler Zika

Reputation: 1224

get object by key then get values from other key same object

I have an array of objects

"fields": [
    {
      "label": "Country",
      "name": "country",
      "picklistValues": ["USA", "CAN"],
      "type": "string"
    },
    {
      "label": "Day",
      "name": "day",
      "picklistValues": ["Monday", "Tuesday", "Wednesday"],
      "type": "string"
    },
    {...},
  ]

Using this code

  renderTerritoryMeta() {
      return this.props.territoryMeta.map((territoryField) => {
        return (
          <div className="slds-grid slds-box slds-box--x-small tile">
              {territoryField.label}

          </div>
        );
      });
  }

enter image description here

It's rendering all of the objects in the array. I'd like to get specific objects by key name plus the value and then get the picklistValues of the same object.

// with this array
// get the object by key 'name' & value 'country'
// then with same object get values from key 'pickListValues'

Upvotes: 0

Views: 56

Answers (2)

Robsonsjre
Robsonsjre

Reputation: 1606

You can use a condition before the div render I would try something like that:

renderTerritoryMeta() {
      return this.props.territoryMeta.map((territoryField) => {
        const shouldRender = territoryField.name === 'country'
        let pickListValues = []
        if (shouldRender) pickListValues = territoryField.pickListValues
        if (!shouldRender) return null
        return (
          <div className="slds-grid slds-box slds-box--x-small tile">
              {territoryField.label}

          </div>
        );
      });
  }

Upvotes: 1

Chad
Chad

Reputation: 618

Short circuit a map when the name = country.

render(){
    let fields = [
        {
        "label": "Country",
        "name": "country",
        "picklistValues": ["USA", "CAN"],
        "type": "string"
        },
        {
        "label": "Day",
        "name": "day",
        "picklistValues": ["Monday", "Tuesday", "Wednesday"],
        "type": "string"
        }
    ]; 

    return(
        <div>
        {
            fields.map(
                ( item, i ) =>
                item.name === 'country'
                &&
                <div key={i}>
                    {
                        item.label
                    }
                </div>
            )
        }            
        </div>
    )
}

Upvotes: 0

Related Questions