Parse JSON replace every comma with a <br> element Javascript

Question

I have a string of JSON data and I need to replace every comma with a <br> in javascript.

Here is my JSON {"Items":"beans ,rice ,flour","Quantity":"4 ,5 ,6"}

And my JSON call

jQuery(document).ready(function($) {
    $.get( url, function( data ) {

        $.each( data, function( i, val ) {

            $( "#pantry" ).append(
                '<h3>' + 
                    '<p>' +
                    items + 
                    '</p>' +
                    '<p>' +
                    val +
                    '</p>' +
                '</h3>'
            );
        });
    });
  });

What do I need to add as a modifier?

Josh · Accepted Answer · 2017-02-24 18:38:22Z

2

You could stringify the JSON object, then use the method replace for Strings.

var test = JSON.stringify({"Items":"beans ,rice ,flour","Quantity":"4 ,5 ,6"});

var updatedTest = test.replace(/,/g, '<br>');
// Outputs:
// {"Items":"beans <br>rice <br>flour"<br>"Quantity":"4 <br>5 <br>6"}

This wont work corrctly though because it will update the commas that seperate each property.

This is more logical:

var test = JSON.parse(JSON.stringify({"Items":"beans ,rice ,flour","Quantity":"4 ,5 ,6"}));
var updatedTest = {};
for (prop in test){
  updatedTest[prop] = test[prop].replace(/,/g, '<br>')
}

updatedTest = JSON.stringify(updatedTest);

// updadedTest Outputs:
// {"Items":"beans <br>rice <br>flour","Quantity":"4 <br>5 <br>6"}

edited Feb 24, 2017 at 18:38

answered Feb 24, 2017 at 18:31

Josh

1,47419 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob M. · Accepted Answer · 2017-02-24 18:34:49Z

1

You can split on ',' and join using <br />.

items.split(',').join('<br />')

answered Feb 24, 2017 at 18:34

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Collectives™ on Stack Overflow

Parse JSON replace every comma with a <br> element Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related