Wrapper and custom object in list

Question

How to show this elements in html. I am new in salesforce and programming

public with sharing class StockMarketSharesWrapper {
    @AuraEnabled(cacheable=true)

    public static List<Wrapper> getAllCompanys(){
        // Define the list
        List<Wrapper> com = new List<Wrapper>(); 

        // Create account sObjects
        Wrapper w = new Wrapper();
        w.Ticker = 'U';
        w.Name = 'Unity Software Inc';
        Wrapper w1 = new Wrapper();
        w.Ticker = 'UAL';
        w.Name = 'United Airlines Holdings, Inc.' ;
        Wrapper w2 = new Wrapper();
        w.Ticker ='DAOOU' ;
        w.Name = 'Crypto 1 Acquisition Corp Unit';
        Wrapper w3 = new Wrapper();
        w.Ticker = 'GLLIU';
        w.Name ='Globalink Investment Inc. Unit' ;

        // Add accounts to the list
        com.add(w);
        com.add(w1);
        com.add(w2);
        com.add(w3);

        return com;
    }

    public class Wrapper{
        @AuraEnabled
        public String Name {get; set;}
        @AuraEnabled
        public String Ticker {get; set;}
    }
}

I want to show the list of "//Create account sObjects" in HTML with wrapper how should I do it?

---

UPDATE I tried:

APEX

public with sharing class StockMarketSharesWrapper {   
    @AuraEnabled(cacheable=true)
    public static List<Wrapper> getAllCompanys(){
        // Define the list
        List<Wrapper> com = new List<Wrapper>(); 

        // Create account sObjects
        Wrapper w = new Wrapper();
        w.Ticker = 'U';
        w.Name = 'Unity Software Inc';
        Wrapper w1 = new Wrapper();
        w1.Ticker = 'UAL';
        w1.Name = 'United Airlines Holdings, Inc.' ;
        Wrapper w2 = new Wrapper();
        w2.Ticker ='DAOOU' ;
        w2.Name = 'Crypto 1 Acquisition Corp Unit';
        Wrapper w3 = new Wrapper();
        w3.Ticker = 'GLLIU';
        w3.Name ='Globalink Investment Inc. Unit' ;

        // Add accounts to the list
        com.add(w);
        com.add(w1);
        com.add(w2);
        com.add(w3);

        return com;
    }

    public class Wrapper{
        @AuraEnabled
        public String Name {get; set;}
        @AuraEnabled
        public String Ticker {get; set;}
    } 
}

JS

import { wire, LightningElement } from 'lwc';
import getAllCompanys from '@salesforce/apex/StockMarketSharesWrapper.getAllCompanys';

export default class wrapperList extends LightningElement {
  @wire(getAllCompanys, {}) companys;
  columns = [{ label: 'Name', fieldName: 'Name' }, { label: 'Ticker', fieldName: 'Ticker' }]
}

JS v2

    Ticker= '';
    Name='';

    @wire(getAllCompanys, { })
    fetchCompanies(data, error){
        alert('is in ????');
        if (error){
            this.Ticker= JSON.stringify(error);
            this.Name= JSON.stringify(error);
            return;
        }
        if(data.data){
            this.Ticker =data.data.Ticker;
            this.Name =data.data.Name
        }
        
    }

HTML

<template>
    {Ticker}
    {Name}
    {Companys}
  </template>

nothing works ;/

Answer 1

There's an example of this in the lwc-recipes repository published by salesforce.com.

Your JS should look like:

import { wire, LightningElement } from 'lwc';
import getAllCompanys from '@salesforce/apex/StockMarketSharesWrapper.getAllCompanys';

export default class MyLwcComponent extends LightningElement {
  @wire(getAllCompanys, {}) companys;
  columns = [{ label: 'Name', fieldName: 'Name' }, { label: 'Ticker', fieldName: 'Ticker' }]
}

And your HTML can look like:

<template>
  <lightning-datatable data={companys.data} columns={columns} key-field="Name">
  </lightning-datatable>
</template>

See also the lightning-datatable documentation.

Edit: Your Apex is reusing the same variable, despite creating new wrappers; this is why most of your data would be blank.

    Wrapper w = new Wrapper();
    w.Ticker = 'U';
    w.Name = 'Unity Software Inc';
    Wrapper w1 = new Wrapper();
    w1.Ticker = 'UAL';
    w1.Name = 'United Airlines Holdings, Inc.' ;
    Wrapper w2 = new Wrapper();
    w2.Ticker ='DAOOU' ;
    w2.Name = 'Crypto 1 Acquisition Corp Unit';
    Wrapper w3 = new Wrapper();
    w3.Ticker = 'GLLIU';
    w3.Name ='Globalink Investment Inc. Unit' ;

Edit 2: There was a .data missing in the template. I build the entire thing in to a gist.

Answer 2

You have to stringify the data in Apex and return to js side and then store it to object and iterate that object in html