Splitting an array into further arrays based on values

Question

Hi there i have an array of data that looks like this (it contains list number and brand name):

["1_Sophie_Gray", "2_Atlantic_Bay", "2_Trait", "3_Tammy", "3_Flipback", "3_Duck_Dodge", "3_Bambini", "4_Bellisima"]

What i need to do is separate these out and create a ul for each of the lists (1 is Womens clothing, 2 mens clothing, 3 childrens clothing and so on). I though the best way to do this was to loop through this array and separate the values into different arrays of their own based on the list number, e.g.

["1_Sophie_Gray"]

["2_Atlantic_Bay", "2_Trait"]

["3_Tammy", "3_Flipback", "3_Duck_Dodge"]

The reason i want to do this is to build a separate list of icons for each of these new arrays. So eventually i'll end up with this:

<div class="store_brands">
<p id="brand_intro">
    Brands and departments available in this store:
</p>
<h4>list 1</h4>
<ul>
    <li>
        <img src="/images/v3/brand_logos/wallis.gif" alt="list 1 brands" />
    </li>
</ul>
<h4>list 2</h4>
<ul>
    <li>
        <img src="/images/v3/brand_logos/atlantic_bay.gif" alt="list 2 brands" />
    </li>
    <li>
        <img src="/images/v3/brand_logos/trait.gif" alt="list 2 brands" />
    </li>
</ul>
<h4>list 3</h4>
<ul>
    <li>
        <img src="/images/v3/brand_logos/tammy.gif" alt="list 3 brands" />
    </li>
    <li>
        <img src="/images/v3/brand_logos/flipback.gif" alt="list 3 brands" />
    </li>
    <li>
        <img src="/images/v3/brand_logos/duck_dodge.gif" alt="list 3 brands" />
    </li>
</ul>

Here is my code:

function inStoreBrands (storeData) {

var brandsArr = [],
    listNum,
    fileName,
    brandImgsPath = "/images/v3/brand_logos/",      
    brandList = '<div class="store_brands"><p id="brand_intro">Brands and departments available in this store:</p>',
    brandResults = storeData.brands,
    brands = brandResults.split(", "),
    listCount = 1,
    titleText = "list 1";

        for (var i=0; i<brands.length; i++) {
            listNum = brands[i].split(/_(.+)/)[0];
            listNum = parseInt(listNum);

            fileName = brands[i].split(/_(.+)/)[1];
            fileName = fileName.toString().toLowerCase();

            function addToArray () {
                brandsArr.push(brandImgsPath + fileName + '.gif');
            }

            if(listNum !== listCount){
                buildBrandList(brandsArr, titleText);
                titleText = "list " + listNum;
                addToArray();
            } else {
                addToArray();
            }
        }

function buildBrandList(brandsArr, titleText) {
    brandList += '<h4>'+titleText+'</h4>';
    brandList += '<ul>';
    for (i=0; i < brandsArr.length; i++) {
        brandList += '<li><img src="'+brandsArr[i]+'" alt="'+titleText+' brands" /></li>';
    }
    brandList += '</ul>';
    brandsArr = [];
    listCount++;
}

brandList += '</div>';      
return brandList;               
};

I know the logic is horribly flawed, hence the reason it doesn't work. Can anyone help me figure this out?

Answer 1

A simple design change might help you out. Consider changing the format of how you create your brands array. For example, instead of storing 1_Sophie_Gray, consider 1_Sophie-Gray.

var arr1;
var arr2;
//etc

for(i=0;i<brands.length - 1; i++){ //So we've split 1_Sophie-Gray from everything else
   var tmpArr = brands[i].split('_');
   if(tmpArr[0] == 1){             //parse to the correct array
      arr1.push("brands[i]");      //push into the appropriate array
   } else if(tmpArr[0] == 2) {
      arr2.push("brands[i]");
   }
}

Keep in mind that this is psuedo-ish code. Hope that helps!

-sf

EDIT: To answer El Guapo's question in the comments. Yes, you can create the arr variables dynamically, but you will have to do so with a little bit of work from the code-behind side of things. All code behind examples are in VB.Net.

If you are wanting this function to be fired on page load. You can build and register it in the Page_Load function using the Page.ClientScript.RegisterClientScriptBlock method. Example in Page_Load()

Protected Overrides Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
     If Not ScriptManager1.IsInAsyncPostBack Then
      MyBase.Page_Load(sender, e)
      'Do whatever else you need to do on Page Load

      Page.Form.DefaultButton = btnSubmit.UniqueID
      Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), Guid.NewGuid().ToString(),createjs())

End Sub

Public Function createjs() As String
   Dim str As String = ""
   str = "<script type='text/javascript' language='javascript'>function ClickSubmit(){var btn = '" & btnSubmit.ClientID & "'; btn = getElementSomehow(btn); btn.click()};" & _
   " <all your javascript> " & _
   " //Im using & _ to make things more readable once the js gets created" & _
   " </script>"
   return str
End Function

Creating the javascript from the code behind allows you to pass in arrays to your client that wouldn't normally be available. Let's take the contrived example above, and get a little closer to what you'd like to do. Say arr is a variable you've got somewhere else and it's defined as follows:

arr = ""1_Sophie_Gray", "2_Atlantic_Bay", "2_Trait", "3_Tammy", "3_Flipback", "3_Duck_Dodge", "3_Bambini", "4_Bellisima""

Note that you could add, delete, modify this array entirely from the .vb code. Then, once it's where you want it. You can throw it to your code behind function that has been tasked with creating your client side javascript.

Public Function ModifyJS(ByVal PassedArr As String) As String
   Dim str As String = ""
   str = "<script type='text/javascript' language='javascript'>function ClickSubmit(){var btn = '" & btnSubmit.ClientID & "'; btn = getElementSomehow(btn); btn.click()};" & _
   " <all your javascript> " & _
   " var JSarr = [" & PassedArr & "]; " & _
   " //Im using & _ to make things more readable once the js gets created" & _
   " </script>"
   return str
End Function

And...then it's not a huge leap to get here:

Public Function ModifyJS(ByVal PassedArr As String, ByVal NoArrays As Integer) As String
   Dim str As String = ""
   str = "<script type='text/javascript' language='javascript'>function ClickSubmit(){var btn = '" & btnSubmit.ClientID & "'; btn = getElementSomehow(btn); btn.click()};" & _
   " <all your javascript> " & _
   " var JSarr = [" & PassedArr & "]; " & _
   For i As Integer = 0 To NoArrays
      str &= " var arr" & i & "=[];"
   Next
   " //Im using & _ to make things more readable once the js gets created" & _
   " </script>"
   return str
End Function

Hope that helps bro!

-sf

Answer 2

You didn't post the exact data for storeData and how you built it - so I made some assumptions: see the demo