splitting JSON array element html value using jquery?

Question

This is my jquery function the argument passed is php json_encoded data,

   function html_modify(html) {
         var str=JSON.stringify(html);
         var arr=$.parseJSON(str);

         var tot='';
         $.each(arr,function(i,val){

            if(i=='options') {
               alert(val);
            }
         });

    }

  html_modify(<?php echo $encode ?>);

The value I will get on alert that is alert(val) will be,

       <span style="font-family: Times New Roman; font-size: 12pt;"><img style="vertical-align:middle" width=83 height=44 src="image045.gif"></span><span style="font-family: Times New Roman; font-size: 12pt;"><img style="vertical-align:middle" width=48 height=44 src="image046.gif"></span><span style="font-family: Times New Roman; font-size: 12pt;"><img style="vertical-align:middle" width=48 height=44 src="image047.gif"></span><span style="font-family: Times New Roman; font-size: 12pt;"><img style="vertical-align:middle" width=83 height=44 src="image048.gif"></span>

I am trying to remove all the "spans" present in the result above and keep only "image" tags further. But currently have no clue. Thanks.

Jai · Accepted Answer · 2014-03-03 11:59:17Z

3

I am trying to remove all the "spans" present in the result above and keep only "image" tags further.

So for this you have to find image in val and .unwrap() it:

if(i=='options') {
   var elem = $(val).find('img').unwrap();
   alert(elem);
}

A small demo to you.

edited Mar 3, 2014 at 11:59

answered Mar 3, 2014 at 11:54

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

6 Comments

Jai Over a year ago

oh you have to do val.find().unwrap() its updated now.

Learner_Programmer Over a year ago

"TypeError: val.find is not a function" is the result i got.

Jai Over a year ago

make it a jquery object then. $(val). yes this should work now.

Learner_Programmer Over a year ago

I am getting alert as [object Object] if I use $(val). thanks anyway.

Learner_Programmer Over a year ago

yes, in console it is printing the object,but what i am getting is object, is there any way to turn it into html like "<img src='image1.jpg'> </img>" so that i can append a "<input type='radio'>" and prepend "</input>" to the images.thanks

|

musefan · Accepted Answer · 2014-03-03 12:05:08Z

1

You can manipulate the HTML with JQuery but first you should wrap it in a DIV element so that JQuery will be able to iterate over the child elements properly:

var div = $("<div/>").append(val);//create a JQuery object for searching
var result = $("<div/>");//build our result JQuery object

Then you can loop each span:

//loop each span element
div.find("span").each(function(){
    var img = $(this).find("img");//find the img element for the span
    result.append(img);//append the img element to the result object
});

and get your final HTML result:

var finalHtml = result.html();//convert the result to html string

Here is a working example

edited Mar 3, 2014 at 12:05

answered Mar 3, 2014 at 11:59

musefan

48.5k21 gold badges144 silver badges193 bronze badges

8 Comments

Learner_Programmer Over a year ago

Really sorry for not looking into your to the point answer, however i was initially confused with <div/> tag as I have not used it before let me check it thanks.sorry again.

musefan Over a year ago

@echoLearner_php: Just ask if you are unsure about anything, and don't get me wrong as Jai's answer using unwrap is a much simpler solution so you can still use that. The <div/> used here just creates a parent dummy element that we can search, and also call html() on to get the contents. It is just there for the process, it gets discarded when we are finished anyway

Learner_Programmer Over a year ago

thanks it was working,but if wanted to include each image within a radio button how would I do that?

musefan Over a year ago

var radio = $("<input type='radio' name='choice' value='"+tot+"'/>"); radio.append(img); result.append(radio);

musefan Over a year ago

@echoLearner_php: No idea why it's not working, might be something to do with invalid HTML. Here is a work around though

|

Collectives™ on Stack Overflow

splitting JSON array element html value using jquery?

2 Answers 2

A small demo to you.

6 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related