Iterate JavaScript Object Array Elements

Question

I am iterating JavaScript array elements using a for loop inside a function. Below is my array.

productArray = [
        {
            icon: faBox,
            name: 'CHANNELS',
            link: '/channelList/${channelListId}',
        },
        {
            icon: faVideo,
            name: 'VOD',
            link: '/vodList/${vodId}',
        },
        {
            icon: faMusic,
            name: 'MOD',
            link: null,
        },
]

Following function is being used to iterate the array elements.

showProductElements = () => {
        for (var i = 0; i < this.productArray.length; i++) {
            return (
                <Link to={this.productArray[i].link}>
                    <div className="tableDiv">
                        <div className="tableCell">
                            <div className="channel">
                                <span>
                                    <FontAwesomeIcon icon={this.productArray[i].icon} 
                                     className="blocks-fa-icon" />
                                </span>
                                <h2 className="block-header">{this.productArray[i].name}</h2>
                            </div>
                        </div>
                    </div>
                </Link>
            );
        }
    };

In render method I am calling the function as follows.

<div className="row">
  {this.showProductElements()}
 </div>

My problem is using all these fuctions and code snippests, I can only render the first object element of the array. Can anyone help me out this for solving this problem?

score 1 · Accepted Answer · answered Dec 23 '19 at 06:49

In the showProductElements function, at first iteration of the for clause you return immediately. so the for loop does not see other elements of your array. You should either make an array and push elements into that and then return that array, or simply use a map function over your array and return the result.

Below is the map way (I suggest this):

showProductElements = () => {
    return this.productArray.map(product => {
        return (
            <Link to={product.link}>
                <div className="tableDiv">
                    <div className="tableCell">
                        <div className="channel">
                            <span>
                                <FontAwesomeIcon icon={product.icon} 
                                 className="blocks-fa-icon" />
                            </span>
                            <h2 className="block-header">{product.name}</h2>
                        </div>
                    </div>
                </div>
            </Link>
        );
    }});
};

And this is the Array.push way:

showProductElements = () => {
    let tmpArray = [];
    for (var i = 0; i < this.productArray.length; i++) {
            tmpArray.push(
                <Link to={this.productArray[i].link}>
                    <div className="tableDiv">
                        <div className="tableCell">
                            <div className="channel">
                                <span>
                                    <FontAwesomeIcon icon={this.productArray[i].icon} 
                                     className="blocks-fa-icon" />
                                </span>
                                <h2 className="block-header">{this.productArray[i].name}</h2>
                            </div>
                        </div>
                    </div>
                </Link>
            );
        }
    return tmpArray;
};

score 0 · Answer 2 · answered Dec 23 '19 at 06:43

Just don't use loop in render. Array method .map() - best choice for render array of object data

this.productArray.map(item => (
  <Link to={item.link}>
    <div className="tableDiv">
      <div className="tableCell">
        <div className="channel">
          <span>
            <FontAwesomeIcon icon={item.icon} className="blocks-fa-icon" />
          </span>
          <h2 className="block-header">{item.name}</h2>
        </div>
      </div>
    </div>
  </Link>
));

score 0 · Answer 3 · answered Dec 23 '19 at 06:44

could you try this

<div className="row">
  {productArray.map((product, i) => 
    <Link to={product.link}>
      <div className="tableDiv" key={i}>
        <div className="tableCell">
          <div className="channel">
            <span>
                <FontAwesomeIcon icon={product.icon} 
                  className="blocks-fa-icon" />
            </span>
            <h2 className="block-header">{product.name}</h2>
          </div>
        </div>
      </div>
    </Link>
  }
 </div>

score 0 · Answer 4 · answered Dec 23 '19 at 06:44

You shouldn't return in the loop - it will return from the function before the loop has a change to complete. Change it to this:

showProductElements = () => {
    return this.productArray.map(product => {
        return (
            <Link to={product.link}>
                <div className="tableDiv">
                    <div className="tableCell">
                        <div className="channel">
                            <span>
                                <FontAwesomeIcon icon={product.icon} 
                                 className="blocks-fa-icon" />
                            </span>
                            <h2 className="block-header">{product.name}</h2>
                        </div>
                    </div>
                </div>
            </Link>
        );
    }});
};

score 0 · Answer 5 · answered Dec 23 '19 at 06:44

you should use map function instead using index-based for loop

<div className="row">
     {
      productArray.length > 0 && productArray.map((product, index) => {
         return <Link to={product.link}>
                    <div className="tableDiv">
                        <div className="tableCell">
                            <div className="channel">
                                <span>
                                    <FontAwesomeIcon icon={product.icon} 
                                     className="blocks-fa-icon" />
                                </span>
                                <h2 className="block-header">{product.name}</h2>
                            </div>
                        </div>
                    </div>
                </Link>
    })
}

 </div>

Iterate JavaScript Object Array Elements

5 Answers5