jQuery - Build object from html

Question

My ultimate goal is to get out the information my website. I am trying to get something like this returned:

{
    Goals: {
       1: 'ET6',
       2: 'ET10'
    },
    Sub-Off: 80,
    Sub-On: 'ET1'
}

so I have the following markup (the huge line breaks are necessary):

<span class="stats jamie">

        <img src="/client/images/icon-ball.gif" alt="Goals" width="13" height="13">
        ET:6,ET:10

        <img src="/client/images/suboff.gif" alt="Sub-Off" width="13" height="13">
        80      

        <img src="/client/images/subon.gif" alt="Sub-On" width="13" height="13">
        ET:1

                                        </span>

What I have so far

$('.jamie').find('img').each(function(index){
    console.info($(this).attr('alt'));
});

Did you really mean 'er10', or actually 'et10'? Why do you have :'s in the HTML that are not in the JSON? Are these the only formats of data you can have (A simple integer, or letters followed by a colon and an int, separated by commas)? — blex
– blex, Commented Aug 26, 2015 at 20:41
curiousity - why are the huge line breaks necessary? and they probably arent necessary on SO. — Craicerjack
– Craicerjack, Commented Aug 26, 2015 at 20:43
Sadly guys, this isn't my markup. It can't be changed. This is why I am asking for help :) I can't work out how to do it. If the line breaks won't effect how you would grab the information, then sure. I'll edit them — Jamie Hutber
– Jamie Hutber, Commented Aug 26, 2015 at 20:45
@JamieHutber the massive line breaks arent necessary on here. They dont do anything for the code except made it unreadable. — Craicerjack
– Craicerjack, Commented Aug 26, 2015 at 20:47

blex · Accepted Answer · 2015-08-26 20:53:02Z

3

var stats = {};

$('.jamie img').each(function(){
    var name = $(this).attr('alt');
    var data = $(this)[0].nextSibling       // Get the next node
                         .nodeValue         // Get its text value
                         .trim()            // Remove the extra spaces
                         .toLowerCase()     // to lower case
                         .replace(/:/g,'')  // remove colons
                         .split(',');       // split on commas
    stats[name] = data;                     // add to object
});

console.log(stats);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="stats jamie">






        <img src="/client/images/icon-ball.gif" alt="Goals" width="13" height="13">
        ET:6,ET:10






















        <img src="/client/images/suboff.gif" alt="Sub-Off" width="13" height="13">
        80






















        <img src="/client/images/subon.gif" alt="Sub-On" width="13" height="13">
        ET:1











                                        </span>

edited Aug 26, 2015 at 20:53

answered Aug 26, 2015 at 20:51

blex

25.7k6 gold badges48 silver badges78 bronze badges

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

5 Comments

Jamie Hutber Over a year ago

argh so it treats anything after an element as a sibling! Why but of course :)

blex Over a year ago

@JamieHutber Yes, but note the [0], which extracts the DOM element from the jQuery Object, in order to use the native JS function nextSibling. In jQuery, the next sibling would be the next <img>

Roamer-1888 Over a year ago

What if the next sibling was not a text node?

blex Over a year ago

@JamieHutber Oh, and actually, $(this)[0] can just be simplified as this.

blex Over a year ago

@Roamer-1888 I gave a working solution for the given example. Extra checks might be necessary, but given the little information I had, I just gave the simplest example of what can be done.

pizzarob · Accepted Answer · 2015-08-26 21:20:35Z

1

The accepted answer actually doesn't give you what you want. Here's an example using vanilla JS, jquery isn't needed to do a simple loop. This could be used if additional data is added you would just need to change the parent element and split the data with commas.

var parent = document.querySelectorAll('.stats img');
var obj = {};
for(var i in parent){
    var img = parent[i];
    var key = img.alt;
    if(!img.nextSibling) break;
    var values = img.nextSibling.data.trim().split(',');
    if(values.length > 1){
        obj[key] = {};
        for(var c in values){
            obj[key][c] = values[c];    
        }
    } else{
        obj[key] = values[0].toString();
    }
}
console.log(obj)

answered Aug 26, 2015 at 21:20

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

Comments

rrk · Accepted Answer · 2015-08-26 21:11:58Z

a = {};
$('.jamie').find('img').each(function(){
    var textVal = $.trim(this.nextSibling.nodeValue).replace(/:/,'').toLowerCase();
    var textValArray = textVal.split(',');
    var textValObj = {};
    if( textValArray.length > 1 ){
        $.map(textValArray , function( val, i ) {
            textValObj[ i + 1 ] = val;
        });
        a[$(this).attr('alt')] = textValObj;
    } else {
	    a[$(this).attr('alt')] = textVal;
    }
});
console.log(a)

.spacer{height: 3000px; display: block; width: 100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span class="stats jamie">






        <img src="/client/images/icon-ball.gif" alt="Goals" width="13" height="13">
        ET:6,ET:10






















        <img src="/client/images/suboff.gif" alt="Sub-Off" width="13" height="13">
        80






















        <img src="/client/images/subon.gif" alt="Sub-On" width="13" height="13">
        ET:1











                                        </span>

Roamer-1888 · Accepted Answer · 2015-08-26 21:13:15Z

0

We can only guess at the full parsing rules from the short example provided.

I expect you want something like this :

var obj = {};
$("span.stats img").each(function() {
    var nextNode, key, val, text, arr;
    nextNode = this.nextSibling;
    if(nextNode.nodeType !== 3) { // test for text node
        return true; // continue
    }
    key = $(this).attr('alt');
    text = $.trim(nextNode);
    arr = text.split(',');
    if (arr.length < 2) {
        val = text;
    } else {
        val = {};
        for(var i=0; i<arr.length; i++ ) {
            val[i] = arr[i].replace(':', '');
        }
    }
    obj[key] = val;
});

answered Aug 26, 2015 at 21:13

Roamer-1888

19.3k5 gold badges35 silver badges45 bronze badges

Collectives™ on Stack Overflow

jQuery - Build object from html

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related