CODEWITHSUNDEEP
javascriptreactjs
pranami
pranami

Reputation: 1415

How to add a line break inside a javascript variable

I am passing a javascript variable which contains the address and has multiple strings in one sentence. So while setting the variable, I want to break the sentence in 2 lines, i.e. streetNumber and streetName should be in first line and city and zipcode in second line. So I am trying to break the line using <br> tag like this:

let addr2  =  inputDataState.addressDetails.addrObj.street.streetNumber + ' '
             + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
             + inputDataState.addressDetails.addrObj.street.streetName+ ' ' + <br /> 
             + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
             + inputDataState.addressDetails.addrObj.street.city + ' ' 
             + inputDataState.addressDetails.addrObj.street.zipCode ;

But instead of a line break, I am getting [object Object] . So how do I add the line break to divide the variable in 2 lines?

Upvotes: 1

Views: 5290

Answers (4)

tam.dangc
tam.dangc

Reputation: 2032

You should use Object_destructuring and Template_literals to solve your problem and make the code cleaner

const {
  streetNumber,
  streetPrefixCode , 
  streetName,
  streetSuffixCode, 
  city,
  zipCode
} = inputDataState.addressDetails.addrObj.street

let addr2 = `${streetNumber} ${streetPrefixCode} ${streetSuffixCode}
${streetSuffixCode} ${city}  ${zipCode}`

Test this

console.log(`${6+2} 
is 
equal 
to
${2*4}`)

Upvotes: 0

zer00ne
zer00ne

Reputation: 43880

Use another variable so you don't have to type so much and interpolate with Template Literals

let inputDataState = {
  addressDetails: {
    addrObj: {
      street: {
        streetNumber: '123',
        streetPrefixCode: 'S.',
        streetName: 'Main',
        streetSuffixCode: 'St.',
        city: 'Springfield',
        zipCode: '95123'
      }
    }
  }
};

const x = inputDataState.addressDetails.addrObj.street;
let addr = `${x.streetNumber}
${x.streetPrefixCode}
${x.streetName}
${x.streetSuffixCode}
${x.city}
${x.zipCode}`;

console.log(addr);

Upvotes: 0

mepraveenk
mepraveenk

Reputation: 246

insert "\n" in your variable which you are using to print.

Example

let streetName ='Madhapur, Hyderabad \n India-500081';

console.log(streetName );

will print this like below 

Madhapur, Hyderabad 
India-500081

Just add '\n' where you want to break the line.

let addr2  =  inputDataState.addressDetails.addrObj.street.streetNumber + ''
             + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
             + inputDataState.addressDetails.addrObj.street.streetName+ '\n ' +  
             + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
             + inputDataState.addressDetails.addrObj.street.city + ' ' 
             + inputDataState.addressDetails.addrObj.street.zipCode ;

Upvotes: 2

Ramya Makkini
Ramya Makkini

Reputation: 96

The first is the newline character ( \n ). The newline character creates line breaks within the output of a string, be it simply text or JavaScript-generated HTML. 

 inputDataState.addressDetails.addrObj.street.streetNumber + ' '
 + inputDataState.addressDetails.addrObj.street.streetPrefixCode 
 + inputDataState.addressDetails.addrObj.street.streetName+ ' ' + '\n'
     + inputDataState.addressDetails.addrObj.street.streetSuffixCode + ' ' 
     + inputDataState.addressDetails.addrObj.street.city + ' ' 
     + inputDataState.addressDetails.addrObj.street.zipCode ;

Upvotes: 0

Related Questions