REST API: incorrect slashes in url if parent empty

[nicomollet]

Hello everyone,

I am using the WP.API with a custom versionString: "wc/v2/" from WooCommerce.

When fetching ProductCategories (or any other collections with two capital letters), the url called is:
​http://websiteurl/wp-json/wc/v2/products//categories

Example of the code I use, to be able to reproduce the error:

  wp.api.init({'versionString': 'wc/v2/'});
  var productcategories = new wp.api.collections.ProductsCategories();
  productcategories.fetch().done( function() {
    productcategories.each( function( productcategory ) {
      console.log( productcategory.attributes );
    } );
  } );

My tentative fix is the following:

In wp-api.js, line 1406
The parent is sometimes empty, leading to two consecutive slashes.

// Function that returns a constructed url passed on the parent.
url: function() {
  return routeModel.get( 'apiRoot' ) + routeModel.get( 'versionString' ) +
      parentName + '/' + this.parent + '/' +
      routeName;
},

should be replaced by:

// Function that returns a constructed url passed on the parent.
url: function() {
  return routeModel.get( 'apiRoot' ) + routeModel.get( 'versionString' ) +
    parentName + '/' +
    ( ( _.isUndefined( this.get( 'parent' ) ) || 0 === this.get( 'parent' ) ) ?
      ( _.isUndefined( this.get( 'parent_post' ) ) ? '' : this.get( 'parent_post' ) + '/' ) :
      this.get( 'parent' ) + '/' ) +
    routeName;
},

Thank you very much
Nicolas

[TimothyBlynJacobs]

@adamsilverstein Do you have the bandwidth to take a look at this?

[adamsilverstein]

@adamsilverstein Do you have the bandwidth to take a look at this?

Sure, I can try.

@nicomollet Thank you for reporting this issue. Your code change makes sense if this.parent can be empty during collection route construction, which apparently it can!

I have a follow up question:

The parent is sometimes empty, leading to two consecutive slashes.

Do you have a code sample for the endpoint (or steps to reproduce this)? I do see where we use a similar (hard to read) trinary above ​when using `this.parent` in the model route construction. Just curious how to recreate with a collection.

Have you tested the fix above you proposed and verified it works as expected for your endpoints?

[adamsilverstein]

I was able to reproduce this by setting up woo-commerce and adding some multilevel product categories with two letter names as you mentioned. I created a slightly modified fix from your code that corrected the issue in my testing. patch incoming.

…arents.

Trac ticket: https://core.trac.wordpress.org/ticket/44745

[adamsilverstein]

@nicomollet can you please confirm that 44745.diff​ fixes the issue you were seeing?

[adamsilverstein]

Testing instructions:

• Install woocommerce plugin.
• Create some categories, with parents, use short category names like "AA" and "BB" going several levels deep.
• Enqueue wp-api script, in your themes functions.php add

add_action( 'admin_enqueue_scripts', function() {
        wp_enqueue_script( 'wp-api' );
} );

• Load any admin page and in the console enter:

  wp.api.init({'versionString': 'wc/v2/'});
  var productcategories = new wp.api.collections.ProductsCategories();
  productcategories.fetch().done( function() {
    productcategories.each( function( productcategory ) {
      console.log( productcategory.attributes );
    } );
  } );
  

Result before patch: JS error. Result after patch: list of categories.

[nicomollet]

Hello everyone,

Sorry I am late, I am here to confirm I tested the code myself.

The example I provided with ProductCategories in WooCommerce, is also an issue with the core "PageRevisions" collection: two slashes.

@adamsilverstein you reproduced and documented exactly what happened, thank you.

The patch obviously works great ;)

[adamsilverstein]

In 49390:

REST API: JS Client - improve collection route construction for empty parents.

Fix an issue where the constructed path for hierarchical collections could contain a double slash ("") when items contained empty parents, causing an error.

Props nicomollet.
Fixes #44745.

Merged into WP Core with changeset https://core.trac.wordpress.org/changeset/49390.