问题描述:

So, I am asking about how to create the appropriate concept/solution for a problem I have coming up. I am pretty sure I an cover it, but after talking with some on here, I see there are more than one way to skin a cat, and more often - better. lol.

So, I have some data coming in.. via ajax call. Ok great. That all gets bundled in a basket that I think create page paginations.

For instance, I get a bucket of 4 items, and my pagination is 2 per page.. equals 2 pages. I only build the pages one pagination is clicked.. I have the data, but then I build it out. (for the sake of the example below).

So here is my issue. I have a second set of data that i must retrieve (it is a seperate ajax call) and that second set of data might append additional data to the first set of items.

How best to map that second set to the first even when their display is not built yet.

So, - for the sake of argument, I have my first set of data that i just received. Lets say there is only 2 items per page.

In total, my first bucket has the following data:

data = [

{name:ITEM1, desc: Greatest Book in History, id: 98987 },

{name:ITEM2, desc: Second Greatest Book in History, id: 76557 },

{name:ITEM3, desc: Third Greatest Book in History, id: 121212 },

{name:ITEM4, desc: Fourth Greatest Book in History, id: 09546 }

]

page one.


ITEM 1 - Greatest Book in history

ITEM 2 - Second Greatest Book in history


Page 2 pagination is clicked


ITEM 3 - Third Book in history (**special sale: Special Edition**)

ITEM 4 - Fourth Greatest Book in history

Now, my second second data has the following

specialData = [

{121212 : special sale: Special Edition}

]

So, the second ajax call is gonna send all my First Bucket IDS and get returned any "new" information that is available. If there is, I am gonna append the display with the new data.

Now, my guess to do this is:

1). Wait for the second request to finish then append the first bucket data with the second set of info, so when I build out the pagination, the data is there gets build as pagination is requested.

or

2). Build the first bucket of data as normal and then apply an * element id * that is the same as the item id number.... and when the second data bucket is fetched, I append to the html element id with the new info.. that is how I find the appropriate match. THe only thing is, I have to know that that particular element ID dom item is present (visible/built to the current pagination page) before I can append that new info.

<div>ITEM 3 - Third Book in history<span id="121212"></span></div>

What am I missing here? Is this simpler than I am making it?

网友答案:

I'd probably go with the second approach for both cleanliness and the nature of the data structures provided by JavaScript. Given you've tagged the question with jQuery, here is an implementation.

    var dataBucket = {};
    function enrichBucket(incomingData) {
        for(var i = 0, len = incomingData.length; i < len; i++) {
            var dataEntry = incomingData[i];
            dataBucket[dataEntry.id] = $.extend( dataBucket[dataEntry.id]||{}, dataEntry);
        }
    }

http://api.jquery.com/jQuery.extend/ Check out the [deep] flag if you want to do a deep merge.

相关阅读:
Top