I am trying to show JSON data in a textbox. Data is in this format:

address{
"street":"1st main Road"
"building_name":"Florence"
"Floor":""
"city":"New York"
}

I have tried this:

$('#id_address').val(address.street+'\n'+address.building_name+'\n'+address.Floor+'\n'+address.city);

But issue is that if there is no data in Floor then there will a linebreak between floor and city. How to avoid line breaks if there is no data in address line?

I am trying to show JSON data in a textbox. Data is in this format:

address{
"street":"1st main Road"
"building_name":"Florence"
"Floor":""
"city":"New York"
}

I have tried this:

$('#id_address').val(address.street+'\n'+address.building_name+'\n'+address.Floor+'\n'+address.city);

But issue is that if there is no data in Floor then there will a linebreak between floor and city. How to avoid line breaks if there is no data in address line?

• javascript
• jquery
• html

• Are the property keys known values (i.e. are they always street, building_name, Floor, and city)? Are you wanting the values of the properties displayed in a specific order, or will any order work? If you want them in a specific order, then what do you want done with property keys which you have not specified? – Makyen ♦ Commented May 19, 2018 at 16:59
• Keys are fixed but order is not proper. Need to do it manually. – Sapna Sharma Commented May 20, 2018 at 5:47

5 Answers 5

You can use Object.keys(address) to get the keys of the address property and loop over that and check if the value is empty or not. Then prepare the value for the textarea accordingly based on the condition address[key] !== ''. For more perfection use a condition index+1 !== allKeys.length to prevent \n for the last item.

var address = {
  "street":"1st main Road",
  "building_name":"Florence",
  "Floor":"",
  "city":"New York"
};

var textValue = '';
var allKeys = Object.keys(address);
allKeys.forEach(function(key, index){
  if(address[key] !== ''){
    textValue += address[key];
     if(index+1 !== allKeys.length){
       textValue += '\n';
     }
  }
});
console.log(textValue);
$('#id_address').val(textValue);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id='id_address' rows='5'></textarea>

I know you already accepted an answer, but here is my solution anyway.

I propose you a all-in-one-line solution, not using any loop or something plicated.
Only existing functions/methods, I think that's the easiest solution!… And it's vanilla Javascript!

See ments in my code below:

var address = {
  "street":"1st main Road",
  "building_name":"Florence",
  "Floor":"",
  "city":"New York"
};

// Get values from the object, join them with new lines, and replace the multiple new lines
var textValue = Object.values(address).join('\n').replace(/[\n]+/g, '\n');
// Display in console
console.log(textValue);

I hope it helps.

I would remend

$('#id_address').val([
  address.street,
  address.building_name,
  address.Floor,
  address.city
].filter(Boolean).join("\n"));

or even

const keysToShow = ["street", "building_name", "Floor", "city"];
$('#id_address').val(keyToShow.filter(k => k in address).map(k => address[k]).join("\n"));

Don't use Object.keys, Object.value or a for … in loop if you want to guaranteed the expected order of the values.

I would use append rather than hardcoding it - so in future you can have more values:

Eg:

myObj = { "name":"John", "age":30, "car":null };

$.each(myObj,function(data,value){
if (value !== null ) {
    $('#addres').append(data + '-' + value + '<br>');
}
});

  `
var html ='';
if(address.street != ''){
   html = html + address.street +'\n';
}if (address.building_name != ''){
   html = html + address.building_name +'\n';
}if (address.Floor != ''){
   html = html + address.Floor +'\n';
}if (address.city != ''){
   html = html + address.city;
}
$('#id_address').val(html);

`
Try this one