jQuery Json数组操作 Lodash

Lodash
 

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
.assertive {color: #fff;float: left;width: 120px;height: 30px;line-height: 30px;margin: 0 5px 5px 0;text-align: center;border-radius: 5px;background-color: #ef473a;}
.assertive dt {width: 90px;float: left;}
.assertive dd {width: 30px;float: right;}
.assertive span {width: 30px;float: right;}
</style>

<div class="bd">
    <form id="registerform">
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <input id="txtUserName" name="txtUserName" class="weui_input" type="text" placeholder="用户名称">
                </div>
            </div>
        </div>
        <div class="weui_cells weui_cells_form">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <div id="dataHtml"></div>
                    <input type="hidden" id="hidCount" value="0" />
                </div>
            </div>
        </div>
        <div class="weui_btn_area">
            <button type="button" class="weui_btn weui_btn_primary" onclick="addData()">添加</button>
            <button type="button" class="weui_btn weui_btn_primary" onclick="getData()">查看数据</button>
        </div>
    </form>
</div>
<script>
    var arrayData = [];
    function addData() {
        var text = $('#txtUserName').val();
        if (text == "") {
            alert("请输入用户名称");
        } else {
            var index = $("#hidCount").val();
            arrayData.push({ "val": index, "text": text });
            var html = $("#dataHtml").html();
            //html += '<div class="assertive" id="rowid' + index + '"><dt>' + text + "</dt><dd onclick='DeleteById(" + index + ")'>X</dd></div>";
            html += '<div class="assertive" id="rowid' + index + '">' + text + "<span onclick='DeleteById(" + index + ")'>X</span></div>";
            $("#dataHtml").html(html);
            index++;
            $("#hidCount").val(index);
            $('#txtUserName').val("");
        }
    }

    function DeleteById(id) {
        $("#rowid" + id).remove();
        $.each(arrayData, function (index, item) {
            if (id == item.val.toString()) {
                arrayData.splice(index, 1);
                return;
            }
        });
    }

    function getData() {
        alert(JSON.stringify(arrayData));
    }
</script>

效果图：

Lodash

var arrayObj = new Array();//创建一个数组
var arrayData = [];

arrayObj.push("1");
arrayObj.push("2");
arrayObj.push("3");
arrayObj.push("4");
arrayObj.push("5");

//Array追加数组对象
var moreData = [{ "vale": 100, "name": "电子商务" },{ "vale": 200, "name": "互联网" }];
Array.prototype.push.apply(arrayData, moreData);
arrayData = arrayData.concat(moreData);

arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });
arrayData.push({ "vale": $("#hidCount").val(), "text":"123" });

arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });
arrayData.push({ "objKey": $("#hidCount").val(), "objText": result.Data });


//模糊查询
arrayData.filter((item) => item.vale.includes("abcd"));

//精确查询
var list = arrayData.filter((item)=> item.vale === "100");

var model = arrayData.find((item) => item.vale === "100");
var v = model.vale

//精确查询
let asset = arrayData.filter((item, index) => {
    return item.vale === "100";
});
console.log(JSON.stringify(asset))

//数组长度
alert(arrayObj.length);

//数组转字符串
alert(arrayObj.join(","))

//字符串转数组
var stringTest="aa,bb,cc,dd,ee"
let array = stringTest.split(",");
$.each(array, function (index, item) {
    ipWhiteStr += item + "   ";
});

//json转字符串
alert(JSON.stringify(arrayData));


///删除arrayData元素
function DeleteLawyer() {
    $("#liLawyer" + $("#hidEditId").val()).remove();
    $.each(arrayData, function (index, item) {
        if ($("#hidEditId").val() == item.objKey.toString()) {
            arrayData.splice(index, 1);
            return;
        }
    });
    //alert(JSON.stringify(arrayData));
}

/// 插入数据
var arrR = ['a', 'b', 'c', 'd']
arrR.splice(1, 0, 'a1')
arrR.splice(1, 0, 'b1')
arrR.splice(1, 0, 'c1')
console.log(arrR); //['a','c1','b1','a1','c','d'] 

今天的文章jQuery Json数组操作 Lodash分享到此就结束了，感谢您的阅读。