Not sure if this is the way to accomplish this. I have a dataset column that needed to looped through and based on the values it should conditionally display them. I have this code copied four times to make this work, not sure how would I do it, if I weren't sure of the values coming in. 

<template>
    <div class="slds-grid slds-gutters slds-align_absolute-center">
        <div class="slds-col slds-size_2-of-12">
            <lightning-card title="BRITISH COLUMBIA">
                <hr class="titleDivider">
                    <template for:each={bc} for:item="city">
                        <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}>
                            <lightning-layout-item flexibility="auto" padding="horizontal-small">
                                <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p>
                            </lightning-layout-item>
                            <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small">
                                <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                    <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p>
                                </template>
                            </lightning-layout-item>
                        </lightning-layout>
                    </template>
            </lightning-card>
        </div>
        <div class="slds-col slds-size_2-of-12">
            <lightning-card title="ALBERTA">
                <hr class="titleDivider">
                    <template for:each={ab} for:item="city">
                        <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}>
                            <lightning-layout-item flexibility="auto" padding="horizontal-small">
                                <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p>
                            </lightning-layout-item>
                            <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small">
                                <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                    <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p>
                                </template>
                            </lightning-layout-item>
                        </lightning-layout
                    </template>
            </lightning-card>
        </div>
        <div class="slds-col slds-size_2-of-12">
            <lightning-card title="MANITOBA">
                <hr class="titleDivider">
                    <template for:each={mb} for:item="city">
                        <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}>
                            <lightning-layout-item flexibility="auto" padding="horizontal-small">
                                <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p>
                            </lightning-layout-item>
                            <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small">
                                <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                    <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p>
                                </template>
                            </lightning-layout-item>
                        </lightning-layout>
                    </template>
            </lightning-card>
        </div>
        <div class="slds-col slds-size_2-of-12">
            <lightning-card title="SASKATCHEWAN">
                <hr class="titleDivider">
                    <template for:each={sk} for:item="city">
                        <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}>
                            <lightning-layout-item flexibility="auto" padding="horizontal-small">
                                <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p>
                            </lightning-layout-item>
                            <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small">
                                <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                    <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p>
                                </template>
                            </lightning-layout-item>
                        </lightning-layout>
            </lightning-card>
        </div>
    </div>
</template>

The Javascript

import { LightningElement, wire, track } from "lwc";
import getCityStats from "@salesforce/apex/mduMarketAnalysisController.getCityStats";

export default class MduPenetration extends LightningElement {
  @track bc = [];
  @track ab = [];
  @track mb = [];
  @track sk = [];

  @wire(getCityStats) cityStats({ data }) {
    if (data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].sumchans__Province_Code__c == 'BC') {
          this.bc.push(data[i]);
        }
        if (data[i].sumchans__Province_Code__c == 'AB') {
          this.ab.push(data[i]);
        }
        if (data[i].sumchans__Province_Code__c == 'MB') {
          this.mb.push(data[i]);
        }
        if (data[i].sumchans__Province_Code__c == 'SK') {
          this.sk.push(data[i]);
        }
        //this.stats.push(data.value); 
      }
    }
  }
}

Please advise!