jQuery将html解析为JSON

Question

I am currently using the following code:

jQuery('#book-a-service').click(function(){
 var selectedServices = jQuery('.selected').parent().parent().html();       
 console.log(selectedServices);
});

and that returns:

<td rowspan="3">Brakes</td>
  <td class="service-title">BRAKES SET</td>
  <td class="service-description"><p>Setting of front and rear brakes for proper functioning (excluding bleeding)</p></td>
  <td class="service-price">R <span id="price-brakes-set">R75</span><div id="select-brakes-set" class="select-service selected"></div>
</td>

which is what i want, except i need an array of all the elements with '.selected' class in JSON.. i just want to know how i could almost parse it in a way that i only get the contents of the td tags and as for the "service-price" only the numeric value and then how would i insert those values into a json object?

Any Help Greatly Appreciated..

Answer 1

jQuery is not my most formidable frameworks, but this seems to do the trick.

jQuery('#book-a-service').click(function(){
    var selected = jQuery('.selected');
    selected.each( function() {
        var children = jQuery(this).parent().parent().find('td');
        var json = {};
        console.log(children);
        json.type = jQuery(children[0]).text();
        json.title = jQuery(children[1]).text();
        json.description = jQuery(children[2]).find('p').text();
        json.price = jQuery(children[3]).find('span#price-brakes-set').text();
        console.log(json);
        console.log(JSON.stringify(json));
    });
});

in action: http://jsfiddle.net/3n1gm4/DmYbb/

Answer 2

When various elements share the same class and you select them with $(".class"), you can iterate through all of them using:

$(".selected").each(function() {
    var element = $(this); // This is the object with class "selected" being used in this iteration
    var absoluteParent = $(this).parent().parent();

    // Do whatever you want...

    var title_element = $(".service-title", absoluteParent); // Get service-title class elements in the context provided by "absoluteParent", I mean, "inside" of absoluteParent
    var title = title_element.html();
});

In the specific case of prices, I don't know exactly what is the price (probably R75?). Anyway, it should be inside a div and then select that div to obtain the price. If it is R75, then note that the "id" property should be unique for every DOM object in your HTML.

Also note that, when getting HTML, you're only getting a string , not the actual element, so it will probably not be useful for getting new values in an easy way (you won't be able to navigate through DOM elements with an ordinary string, even if it represents HTML from an actual object). Always get jQuery objects and work with them, unless you actually need the HTML.

For generating a JSON string, just create a global array and add the objects/values you need there. Then you can obtain a JSON string using var jsonText = JSON.stringify(your_array);

Consider not doing this in Javascript, as it's not useful in the majority of cases. Just send the values through POST value to a script (PHP, for example) and in the PHP you will get the actual value. The other way (PHP to Javascript) will be useful to return JSON (using json_encode($a_php_array) ) and then, in Javascript, transform to a JS array using var my_array = JSON.parse(the_string_returned_by_php); .