how to display objects in litelement component

Question

I would like to know how to display the two different object values in lit-element component

 render() {
  ${this.providerList.map(function (provider) {
       ${this.query.map(function (query) {
      return html`
          <div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
                <div class="card-body p-0">
                  <div class="row m-2">
                    <div class="col-sm-4">   
                        <p>${provider.name} ${query.value}</p>
                    </div>
                  </div>
                 </div>
           </div>
        })}
      `;})}
 }

import { LitElement, html, css } from 'https://unpkg.com/@polymer/lit-element/lit-element.js?module';
export class Provider extends LitElement {
   constructor(){
     super();
      this.providerList=[
         {
           id="1", name="fund" ,description: "Raising Funds"
          },
         {
           id="2", name="transfer" ,description: "transfering money"
         }
     ];
     this.query=
       { 
         value: "200", country:"SG"
       }    
   }
  render() {
  ${this.providerList.map(function (provider) {
       ${this.query.map(function (query) {
      return html`
          <div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
                <div class="card-body p-0">
                  <div class="row m-2">
                    <div class="col-sm-4">   
                        <p>${provider.name} ${query.value}</p>
                    </div>
                  </div>
                 </div>
           </div>
        })}
      `;})}
 }
}

Expected Output
To display the two different object values in render html.

Answer 1

Each of your anonymous functions need to return a string and, since they use .map you need to use .join('') to convert from an Array to a string.

See the example below:

let providerList = [
  {
    id: "1",
    name:"fund",
    description: "Raising Funds"
  },
  {
    id: "2",
    name: "transfer",
    description: "transfering money"
  }
];

let query = [
  { 
    value: "200", country:"SG"
  }
]

let holder = document.querySelector('.holder');
holder.innerHTML = providerList.map(
  function (provider) {
    return query.map(
      function (query) {
        return `
<div class="card mb-4" style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.28);border: none">
  <div class="card-body p-0">
    <div class="row m-2">
      <div class="col-sm-4">   
          <p>${provider.name} ${query.value}</p>
      </div>
    </div>
   </div>
</div>`;
      }
    ).join('');
  }
).join('');

<div class="holder"></div>

Yes, I removed the LITism of the code, but this should show you how it works and then you can put this back into your render function.