根据值将数组拆分为其他数组

Splitting an array into further arrays based on values

本文关键字:数组 拆分 其他      更新时间:2023-09-26

嗨,我有一个数据数组,看起来像这样(它包含列表号和品牌名称):

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

我需要做的是将这些分开,并为每个列表创建一个ul(1是女装,2是男装,3是童装,依此类推)。我认为最好的方法是循环遍历这个数组,并根据列表编号将值分隔成不同的数组,例如

["1_Sophie_Gray"]

["2_Atlantic_Bay", "2_Trait"]

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

我想这样做的原因是为每个新数组构建一个单独的图标列表。所以最终我会得到这个:

<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>

这是我的代码:

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;               
};

我知道这个逻辑有严重的缺陷,所以它不起作用。有人能帮我弄清楚吗?

您没有发布storeData的确切数据以及如何构建它,所以我做了一些假设:请参阅演示

一个简单的设计更改可能会帮助您。考虑改变创建品牌阵列的方式。例如,不要存储1_Sophie_Gray,而是考虑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]");
   }
}

请记住,这是伪代码。希望能有所帮助!

-sf

编辑:在评论中回答El Guapo的问题。是的,您可以动态地创建arr变量,但您必须从代码背后做一些工作。所有代码隐藏示例都在VB.Net.中

如果您希望在页面加载时激发此函数。您可以使用Page.ClientScript.RegisterClientScriptBlock方法在Page_Load函数中构建并注册它。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

通过从代码背后创建javascript,可以将通常不可用的数组传递给客户端。让我们举上面这个人为的例子,更接近你想做的事情。假设arr是你在其他地方得到的一个变量,它的定义如下:

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

请注意,您可以完全从.vb代码中添加、删除和修改此数组。然后,一旦它到达了你想要的位置。你可以把它扔给你的代码隐藏函数,该函数的任务是创建你的客户端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

而且。。。那么这并不是一个巨大的飞跃:

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

希望对兄弟有所帮助!

-sf