Cannot Access hasMany-Belongs To Object in #each loop

I had a scenario where i use ember-cli-selectize for creating new orders for an inventory managment system. As you can see in the screen shot , when i click “add new item” a new orderitem will be created to the “orders” records (where order has many orderitems) . And every orderitem Belongs to a product. I needed to integrate ajax search with ember-power-select to search for products. (which is tough with ember-cli-selectize). But the problem is i couldn’t set the selected product to the element in the loop.

The models have a relationship like this

//models/order.js.js
orderitems: DS.hasMany('orderitem' ,{embedded: 'always', async:true}),

//models/orderitems.js
 order: DS.belongsTo('order' ,{async:true}),
product: DS.belongsTo('product' ,{async:true}),

//models/product.js
itemcode: DS.attr('string'),
productname: DS.attr('string'),

// in Template
// This is the loop for orderitems 
    {{#each orderitems  as |orderitem|}}

// Currently i Use ember ember-selectize and the below code works , the selection parameter //automatically sets the selected product with the orderitem in the loop

    {{ember-selectize
                content=products
                optionValuePath="content.id"
                optionLabelPath="content.productname"
                selection=orderitem.product
                placeholder="Select a Product"
              }}


// my attempt was like this.
// Here the list is getting populated, but cannot set the product to orderitem

     {{#power-select
       search=(action "searchProduct")
       selected=selected
       onchange=(action "selectOrderitem" orderitem.id)
       as |repo|
     }}
     {{repo.attributes.productname}}
     {{/power-select}}

          {{/each}}


// in controller file
actions:{



// the ajax search function .It's working good
    searchProduct(term) {
              if (Ember.isBlank(term)) { return []; }
              const url = `/products?direction=asc&page=1&productname=${term}`;
              return this.get('ajax').request(url).then(json=>json.data);
            },

// attempt to manually trigger on change , 
    selectOrderitem( orderitemid , product){
       console.log(product);
// Console-Output: Object {id: "4", type: "products", relationships: Object, __ember1465812627710: "ember1116", __ember_meta__: Meta}


      console.log(orderitemid);
// Console-Output: 71

      var orderitem = this.store.findRecord('orderitem',orderitemid);
     orderitem.set('product', product);

// Console.-Output: 
ember.debug.js:16628 Uncaught Error: Assertion Failed: Cannot delegate set('product', [object Object]) to the 'content' property of object proxy <(subclass of Ember.ObjectProxy):ember1118>: its 'content' is undefined.

  },

// it create New Orderitem like this. I assign every Orderitem to order 1 and at last i correct the ordernumber properly
    addNewOrderItem:function(){
       var controller = this;
      var orderitem = controller.store.createRecord('orderitem', {
        quantity :1,
        total :'',
        poitemstatus :'',
        product :controller.get('products').get('firstObject'),
        order : controller.get('orders').get('firstObject'),
      });

      orderitem.save().then(function(){
        controller.get('orderitems').pushObject(orderitem);
      })
      });
    },

}

I dont know the way i am doing this is correct . May be there could be some easy solutions , Could any one help? Please comment if my question is not clear(and sorry for the infant code. i am a newbie to ember).

Thanks in advance

[rinoldsimon]

The problem is in search action. Because it is returning regular json objects, and when assigning them with the (mut) action, it wont really change the reference, it will just rename existing object. So i tried querying the data using “store.query” method.

[talhaobject90]

A similar thread aroused in the discussion platform. I am reopening this as this could benefit some more people.

The best help could be some working examples,

Thanks