how to remove html tags from json output

Question

This is my JSON data:

 {"articleList":[{"menu_name":"Abdominal Crunch","introduction":"<ul>\n<li>Abdominal crunch is one of the most important and basic exercise that &nbsp;helps to strengthen the abdominal muscles and also helps to prevent lower back pain or strain.<\/li>\n<li>While doing abdominal crunch, please maintain a proper form in order to avoid injury. Also to avoid strain you must not bend your neck.<\/li>\n<li>Keep your movements slow, don&rsquo;t do so many crunches at once as it may cause injury, it applies to a famous saying &ldquo;Too much of everything is not good for nothing&rdquo;.<\/li>\n<li>Perform 10-15 repetitions with correct form for each rep.<\/li>\n<li>Main muscles targeted\n<ul>\n<li>rectus abdominis (front abdominal muscles)<\/li>\n<li>Obliques (side abdominals)<\/li>\n<\/ul>\n<\/li>\n<\/ul>","menu_icon":"abs-crunch21.png","menu_icon2":"abs-crunch31.png","menu_icon3":"abs-crunch4.png","menu_icon4":"noimg.jpg","id":"109","parent_id":"108"},{"menu_name":"Ball Crunch","introduction":"<ul>\n<li>While performing ball crunches, proper form is very important to avoid injury.<\/li>\n<li>If you do this exercise properly for 12 sets, you can feel affect in your abdominal muscles.<\/li>\n<li>If you have neck problem, then you must perform it very slowly and carefully.<\/li>\n<li>Keep a bigger size ball for preforming this excercise.<\/li>\n<li>Targeted Muscles\n<ul>\n<li>Rectus Abdominis<\/li>\n<li>Other info:\n<ul>\n<li>Level type: Beginner<\/li>\n<li>Mechanics type: Isolation<\/li>\n<li>Force type: pull<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>","menu_icon":"ball-crunch11.png","menu_icon2":"ball-crunch21.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"110","parent_id":"108"},{"menu_name":"Ball Pass","introduction":"<ul>\n<li>Ball pass exercise is an effective exercise to improve your posture and to get a perfect six pack for you<\/li>\n<li>Main Muscles Targeted<br \/>\n<ul>\n<li>Deep abdominal muscles&nbsp;<\/li>\n<li>&nbsp;Internal and external oblique&rsquo;s<\/li>\n<\/ul>\n<\/li>\n<\/ul>","menu_icon":"ballpass1.png","menu_icon2":"ballpass2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"111","parent_id":"108"},{"menu_name":"Leg Raise","introduction":"<ul>\n<li>Leg raise is an easy and great exercise for strengthening your abdominal muscles. Do this exercise (Leg raise) regularly&nbsp;&nbsp; to get a good abs. This exercise can do many wonders for your major or minor muscles groups. If you do this exercise daily, you will get excellent results.<\/li>\n<li>You can use carpet or yoga mat to feel comfortable while doing this exercise. More better will be if you use a flat bench. But be sure to do this exercise properly and regularly.<\/li>\n<li>Keep your thighs perpendicular to your body while raised your legs towards celling.<\/li>\n<li>You can press your palm on the floor as medium of support for raising your legs. And also keep your lower back&nbsp;&nbsp; attached with the floor.<\/li>\n<li>People having lower back problems are not encouraged to perform this exercise.<\/li>\n<li>Main Muscles Targeted:\n<ul>\n<li>Rectus abdominis.<\/li>\n<li>Hip flexors<\/li>\n<li>Internal and external obliques.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li>Additional main muscles<\/li>\n<\/ul>","menu_icon":"leg-raise11.png","menu_icon2":"leg-raise2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"112","parent_id":"108"},{"menu_name":"Reverse Cunch","introduction":"<ul>\n<li>Reverse crunches gives strength to your front Abdominals muscle, this is an isolation mechanics type exercise for the beginner.<\/li>\n<li>Once your knees reaches to chest, just wait for two seconds and inhaling slowly move your legs back to the ceiling.<\/li>\n<li>Instead of bending your legs you may lift your legs straight to advance in this excercise<\/li>\n<li>Main muscles targeted:\n<ul>\n<li>Front abdominal or rectus abdominis&nbsp;<\/li>\n<\/ul>\n<\/li>\n<li>Additional muscles\n<ul>\n<li>Internal and external oblique&rsquo;s<\/li>\n<\/ul>\n<\/li>\n<\/ul>","menu_icon":"reversecrunch1.png","menu_icon2":"reversecrunch2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"113","parent_id":"108"},{"menu_name":"Twist Crunch","introduction":"<ul>\n<li>\n<div>Twist crunches are easy way for strengthening stomach and creating<\/div>\n<div>flat abdominal muscles. The major reason for strengthening your abdominal<\/div>\n<div>muscles is to make your abdominal young.<\/div>\n<\/li>\n<li>\n<div>&nbsp;People with back pain can fold a towel and use it on their back. These type<\/div>\n<div>of exercise also keeps your back healthy and strength<\/div>\n<\/li>\n<li>\n<div>As a beginner, do it slowly and carefully. This exercise uses isolation mechanism,<\/div>\n<div>you can use &nbsp;&nbsp;&nbsp;cable to hold your legs, keep your elbows tight when performing this exercise.<\/div>\n<\/li>\n<\/ul>","menu_icon":"twist-crunch11.png","menu_icon2":"twist-crunch21.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"116","parent_id":"108"},{"menu_name":"Side Crunch","introduction":"<ul>\n<li>Complete 3 sets with 10-15 repetitions of this exercise. Once you feel that, you are able to complete 10-15 reps with ease, then make increment to the number of reps up to 20-25. At the beginning, you may feel temporary muscle failure.<\/li>\n<li>If you have neck problem, then you must perform &nbsp;&nbsp;slowly and carefully. Do not perform this exercise if you have back pain.<\/li>\n<li>Main muscles targeted:\n<ul>\n<li>&nbsp;Obliques &nbsp;&nbsp;<\/li>\n<\/ul>\n<\/li>\n<li>Synergists\n<ul>\n<li>Rectus abdominals<\/li>\n<\/ul>\n<\/li>\n<\/ul>","menu_icon":"side-crunch1.png","menu_icon2":"side-crunch2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"117","parent_id":"108"},{"menu_name":"Body Weight Squat","introduction":"<ul>\n<li>Body weight squat is a great exercise which targets your abs, hips, legs &ndash;calves and thighs.<\/li>\n<li>During Body weight squat, your body automatically functions your abs, hips, legs muscles while getting up and down from the seated position.<\/li>\n<li>Helps to increase the flexibility in the ankle and in the hips area. Very soon, You will find effect in those area.<\/li>\n<\/ul>","menu_icon":"body-weight-squat.png","menu_icon2":"body-weight-squat2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"164","parent_id":"108"},{"menu_name":"Sprinter Situp","introduction":"<ul>\n<li>Sprinter sit-ups is a wonderful use for improving your abs muscle.<\/li>\n<\/ul>","menu_icon":"sprinter-situp.png","menu_icon2":"sprinter-situp2.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"166","parent_id":"108"},{"menu_name":"Side plank","introduction":"<ul>\n<li>Side plank is a great exercise for your abdominal obliques and the whole core.<\/li>\n<li>Does not need any special equipment except a mat.<\/li>\n<\/ul>","menu_icon":"side-plank11.png","menu_icon2":"side-plank21.png","menu_icon3":"noimg.jpg","menu_icon4":"noimg.jpg","id":"189","parent_id":"108"}]}

From below code, response.data; //this piece of code gives JSON data response.data; //this piece of code gives JSON data How can i remove html tags from here itself so that it can be sent vai $scope.test = a ?

app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "http://webservice.somewebsite.com/exercise/show/pid/107/mid/108/"
    }).then(function mySucces(response) { 
        var a=response.data;  //this gives JSON data as shown above, 
        $scope.test = a
    }, function myError(response) { 
        $scope.test = response.statusText;
    }); 
});

I tried this $scope.test = a.replace(/<\\/?[^>]+>/gi, '') but code stopped working

JSON data with HTML code which looks bad on UI

Answer 1

Try creating angular filter to remove tags. Check this angularjs to output plain text instead of html

I didn't see any html tags in you JSON ? Did you post complete response ?

Answer 2

I think the problem, that you are trying to replace an object a instead of the introduction strings a[i].introduction that actually contain the needed info.

So, it can be replaced in this manner: $scope.test = toValidData(a);

function toValidData(data) {
  data.articleList.forEach(function(article) {
    article.introduction = String(article.introduction)
        .replace(/<[^>]+>/gm, '')
        .replace(/&nbsp;/g, ' ')
        .replace(/&rsquo;/, '\'')
        .replace(/(&ldquo;)|(&rdquo;)/g, '"');
  });
  return data;
}

Answer 3

Just as a side note, if you would like to actually display the HTML, you can use ngSanitize . Example:

http://codepen.io/anon/pen/xOGXya