oj-combobox with RESTDataProvider: options are displayed mulitiple times

User_XYK82

Hello everybody!

I try to use the new RESTDataProvider to feed the options of oj-combobox.

The desired output are seven keywords, but what happens is that the options (keywords) are displayed multiple times.

I have no idea how to control this behaviour. Is there anyone who has an idea what´s going wrong?

** HTML **

<oj-combobox-many id="keywordsDropDown"

      value-options="{{selectedKeywords}}"

      options="[[keywordRestDataProvider]]"

      options-keys.value="id"

      options-keys.label="text">                     

 </oj-combobox-many>

**Typescript**

   const optionsKeywordsDataProvider = {   

url: self.keywordsURL,

     keyAttributes: "id",

     transforms: {

       fetchFirst: {

         request: async (options) => {

           const url = new URL(options.url);

           return new Request(url.href);    },

         response: async ({ body }) => {

           const keywords = self.parseKeywordsResponseBody(body);

           return { data : keywords };

         } } } };

   self.keywordRestDataProvider = new RESTDataProvider(optionsKeywordsDataProvider);

parseKeywordsResponseBody = (body) => {

   var result = [];

   if ((body._embedded != null) && (body._embedded.keywords != null)) {

     result = body._embedded.keywords;    }

   return result;  };

John 'JB' Brock-Oracle

Usually when we see this kind of thing, the field used for keyAttributes, is not unique. It must be. The value for keyAttributes should be your unique id for that request.

User_XYK82

Thank you for your answer.

I checked on the "id" used for the keyAttributes and it is unique.

I tried the keywordRestDataProvider (with configuration as above) with the oj-list-view and here the keywords are displayed correctly.

I am puzzled. Has anyone an idea?

John 'JB' Brock-Oracle

can you share a snippet / example of the JSON that is returned from your REST service? Don't place any private or proprietary data please.

I'll see if I can reproduce this locally.

John 'JB' Brock-Oracle

I will also add my usual question when I see people using oj-combobox. Do you really need to use combobox? This is a component with a very specific use case. It allows a use to type in an arbitrary value and the application can do something with that value. It's not just for selecting from a list. If you don't need this arbitrary entry functionality, you may be better off using an oj-select-single component.

User_XYK82

Dear JB,

attached you find the result of the parseKeywordsResponseBody function in parseKeyword.json. The file contains dummy data, so there are no privacy concerns. As .json files cannot be uploaded it is a .txt.

parseKeyword.txt

I also tried with oj-select-many as I need the mulitselect function and the RESTDataProvider, unfortunately with the same result: options are displayed multiple times.

Additionally I tried with local data (parseKeyword.json) and the ArrayDataProvider. In this case everything works as desired... Maybe you know what goes wrong here.

**typescript**

 self.keywordArrayDataProvider = new ArrayDataProvider<KeywordKey,Keyword>(JSON.parse(keywordData), { keyAttributes: "id" });

**html**

<oj-combobox-many id="keywordsDropDownLocal" value-options="{{selectedKeywords}}"

           options="{{keywordArrayDataProvider}}" options-keys.value="id" options-keys.label="text">

</oj-combobox-many>

  <oj-select-many id="keywordsDropDownSelectManyLocal" value-options="{{selectedKeywords}}"

         options="{{keywordArrayDataProvider}}" options-keys.value="id" options-keys.label="text">

 </oj-select-many>

Thank you very much for your help and support.