Tukukkk

I'm building a custom ajax drawer cart on a shopify site. I'm using a append function to display the updated cart immediatley after a product has been added without page reload.
This is my js to build the cart:

 $.getJSON(_config.shopifyAjaxCartURL, function(cart) {

    $('.ajax-cart-form .cart-item').remove();

    $('.ajax-subtotal .drawer-subtotal').remove();

    $.each(cart.items, function(index, cartItem) {

      var line= index +1;

var cents = "";



if (cartItem.price % 100 < 10) {

cents = "0";

}

var price = parseInt(cartItem.price/100) + "." + cents + cartItem.price % 100;

        $('.ajax-cart-form').append("<div class='cart-item desktop-full mobile-full'><div class='cart-image desktop-5'><a href='"+ cartItem.url +"'title='"+cartItem.title+"'><img src='"+ cartItem.image +"'></a></div><div class='cart-title desktop-7'><p>"+ cartItem.title +"</p><div class='cart-item-actions'><span class='drawer-price'><strong>£ "+ price +" GBP</strong></span></div><div class='cart-quantity'><input type='button' value='-' class='qtyminus qtyminus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"'/><input name='updates' id='updates_"+ cartItem.id +"' class='quantity CartCount' value='"+ cartItem.quantity +"' /><input type='button' value='+' class='qtyplus qtyplus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"' /></div></div>");



  });

  $(function(index, cartItem) {

        var line2= index +1;

        var cents2 = "";



if (cart.original_total_price % 100 < 10) {

cents2 = "0";

}

var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;

  $('.ajax-subtotal').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");

  });

});

Now I've assigned a metafield to my products with a recommended product handle which needs to show in the cart. Only the recommended product for the last added product will show.
In my normal cart I have done this like this:

{% for item in cart.items limit:1 %}

{% assign upsellID = all_products[item.product.metafields.cart_upsell.upsell_product] %}

    <div class="desktop-8 mobile-full cPhoneUpper" id="qmf-cart">

        <div class="cart-item desktop-full mobile-full">

          <div class="cart-image desktop-5">

<a href="{{ upsellID.url }}" title="{{ upsellID.title }}"><img src="{{ upsellID.featured_image | product_img_url: '120x120' }}"></a>

          </div>

              <div class="cart-title desktop-7">

                <p>{{ upsellID.title }}</p>

              </div>

            </div>

    </div>

{% endfor %}

So in my ajax cart I'm doing something like this

  $.each(cart.items.slice(0, 1), function(index, cartItem) {

    var line3= index +1;

      $('.drawer-recommend').append("");

});

Now the issue that I'm having is getting that metafield in the ajax cart as it's not part of cart.js. I've read somewhere to create a alternate template to do this, so I've created a template called 'cart.test.json.liquid' and added my metafield to it like so:

{%- layout none -%}

{

    "items":[

    {%- for item in cart.items -%}

        {

            "metafield1": {{ item.product.metafields.cart_upsell.upsell_product | json }}

        }{% unless forloop.last %},{% endunless %}

    {%- endfor -%}

    ]

}

And when I go to https://my-store-url.myshopify.com/cart?view=test.json I get the right metafield output.
So when I run

$.ajax({

    type: 'GET',

    url: '/cart?view=test.json',

    success: function(response) {

        json_response = JSON.parse(response);

        console.log( 'response', json_response );

    },

    error: function(status) {

        console.warn( 'ERROR', status );

    }

})

I also get the right output in the console. What I'm struggling with now is how do I get this data assigned as the product handle for the recommended product in my append function?
So like I assigned it in the normal cart:

{% assign upsellID = all_products[item.product.metafields.cart_upsell.upsell_product] %}

Any suggestions?