Appending Value in hyperink in LWC

Question

As in LWC values cant be appended directly in view for example :

  <a href={xyx.abc}  target="_blank">link to create</a> ====>
  <a href="abc"+{xyx.abc}  target="_blank">link to create</a>

I was iterating through the values to replace {xyx} with "abc"+{xyx} in JS , However its not appending the values and no console logs are found.

     import { LightningElement, track, api, wire } from 'lwc';  
     import getAccountsList from '@salesforce/apex/abc';  
     import getAccountsCount from '@salesforce/apex/abc';  
     import lwc_help from '@salesforce/resourceUrl/lwcHelpCss';
     import {loadStyle} from 'lightning/platformResourceLoader';
     import topics from '@salesforce/apex/abc';
     import { NavigationMixin } from 'lightning/navigation';
     import { CurrentPageReference } from 'lightning/navigation';



     export default class RecordList extends  NavigationMixin(LightningElement) { 
      // Injects the page reference that describes the current page
          @wire(CurrentPageReference)
          currentPageReference;  
       @track accounts;  
       @track error;  
       @api currentpage;  
       @api pagesize;  
       @track searchKey;  
       @track topicKey;  
       totalpages;  
       localCurrentPage = null;  
       isSearchChangeExecuted = false;  
       @track bShowModal = false;
       @track videoCheck = '';
       @wire(topics) topic;


        handleShowModal(event) {
          var finalArray=[];
          var appender ="http://jsonviewer.stack.hu/";
          console.log('Document Modal Called');
          this.bShowModal = true;
          this.videoCheck=true;
          this.doccheck=false;
          this.videoDoc='';
          this.videoDoc=event.target.value;
          console.log(JSON.stringify(this.videoDoc));
          console.log('this.header values : '+this.videoDoc);
          var filterArrayVideos = [];
          filterArrayVideos = this.videoDoc.filter(function(item) {
            return item.xyz.FileType === "MP4"
          }); 

          console.log('filterArray values : '+JSON.stringify(filterArrayVideos));
          this.videoDoc=filterArrayVideos;
          console.log(JSON.stringify(this.videoDoc));
          finalArray=this.videoDoc;

          finalArray.forEach(function (item) {
          console.log('item values : '+ JSON.stringify(item));
          console.log(item.xyx.abc);
          console.log('before  append : '+appender.concat(' ',item.xyx.abc));
          item.xyx.abc = appender.concat(' ',item.xyz.abc);
console.log('after append : '+ item.xyx.abc);
          });
          console.log(finalArray);
          }



 }  

Answer 1

It very much depends on how your LWC component is structured (e.g. whether your "xyx" property is an API property or not). On the assumption that it is, you could update your component thus:

@api get xyx() {
    return this._xyx;
}

set xyx(string xyx) {
    this._xyx = xyx;

    this.prefixedXyx = "abc" + xyx;
}

@track prefixedXyx;

Then your template would look like:

<a href={prefixedXyx} target="_blank">link to create</a>

What this does is use a tracked property that is calculated when your xyx value is set and then present that tracked property in the UI. It is tracked so a change to this prefixed value will cause the LWC to rerender.

Like I said, exactly how you would do this does depend on how the "xyx" property itself works.

Answer 2

You need concat method to append in an existing string.

var str1 = 'Hello';
var str2 = 'World';

console.log(str1.concat(' ', str2));
// expected output: "Hello World"

console.log(str2.concat(', ', str1));
// expected output: "World, Hello"

Read more here:- String.prototype.concat()

Answer 3

It is not appending because you are modifying this.item inside forEach function instead of item.

Try below:

finalArray.forEach(function (item) {
    item.ContentDocument.LatestPublishedVersionId = appender + item.ContentDocument.LatestPublishedVersionId;
}