Meta Box Serialized Data in Etch

Scenario: I created a non-cloneable group in Meta Box and couldn’t figure out how to extract the data. After looking through the available data, I tried several permutations, only to be frustrated ( a typo when the custom fields were originally set up didn’t help).

The data is location-related information in a group called Location (ID is e_location), so my initial thought was to use this.meta.e_location.my_field_id, but as I stated, it didn’t work. Since this is a nested object, the key is to use unserializePhp().at(0). The unserializePhp() function allows you to access the serialized data, and the 0 represents the index (it is zero-based), so if you were using a cloeable group and needed to target a specific group, you would change the index. In my case, most of the fields I was trying to access looked like this in the end — {this.meta.e_location.unserializePhp().at(0).e_steet_address}.

Compound data

I also have a comma-delimited string within the serialized data for the OpenStreet Map.map – “e_map”: “39.61412689451277,-77.77699649333955,18” and that is accessed using both the unserializePhp() and the split() functions. The split function is also zero-based, so getting the individual pieces looks like this:

• Lat: this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(0)
• Lng: this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(1)
• Zoom: this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(2)

In the end, this is what the code looked like:

<div class="countdown__wrapper" >
  <div class="countdown-wrapper">
    <FwCountdown showTitle={false} showDescription={false} targetDate={this.meta.e_start_date} showYear={false} showHours={true} showMinutes={false} showSeconds={false} />
  </div>
  <div class="aside">
    <OpenStreetMaps lat={this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(0)} lng={this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(1)} title={this.title} address="{this.meta.e_location.unserializePhp().at(0).e_steet_address}<br>{this.meta.e_location.unserializePhp().at(0).e_city} {this.meta.e_location.unserializePhp().at(0).e_state} {this.meta.e_location.unserializePhp().at(0).e_zip}" zoom={this.meta.e_location.unserializePhp().at(0).split(',').at(2)} showAttribution={true} showRecenter={false} height="300px" />
    <div>
      <address><span>{this.meta.e_location_name}</span><span >{this.meta.e_location.unserializePhp().at(0).e_steet_address}</span><span>{this.meta.e_location.unserializePhp().at(0).e_city} {this.meta.e_location.unserializePhp().at(0).e_state} {this.meta.e_location.unserializePhp().at(0).e_zip}</span></address>
      <p><a href={this.meta.e_website}>More about the {this.title}</a></p>
    </div>
  </div>
</div>

<div class="countdown__wrapper" >
  <div class="countdown-wrapper">
    <FwCountdown showTitle={false} showDescription={false} targetDate={this.meta.e_start_date} showYear={false} showHours={true} showMinutes={false} showSeconds={false} />
  </div>
  <div class="aside">
    <OpenStreetMaps lat={this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(0)} lng={this.meta.e_location.unserializePhp().at(0).e_map.split(',').at(1)} title={this.title} address="{this.meta.e_location.unserializePhp().at(0).e_steet_address}<br>{this.meta.e_location.unserializePhp().at(0).e_city} {this.meta.e_location.unserializePhp().at(0).e_state} {this.meta.e_location.unserializePhp().at(0).e_zip}" zoom={this.meta.e_location.unserializePhp().at(0).split(',').at(2)} showAttribution={true} showRecenter={false} height="300px" />
    <div>
      <address><span>{this.meta.e_location_name}</span><span >{this.meta.e_location.unserializePhp().at(0).e_steet_address}</span><span>{this.meta.e_location.unserializePhp().at(0).e_city} {this.meta.e_location.unserializePhp().at(0).e_state} {this.meta.e_location.unserializePhp().at(0).e_zip}</span></address>
      <p><a href={this.meta.e_website}>More about the {this.title}</a></p>
    </div>
  </div>
</div>