Jquery 将值推送到嵌套的ko.observearray中

我想根据JSON负载中的项目是否需要供应商，将供应商列表嵌套到从服务器获取的现有JSON负载中

我想要的结果是这样的：

    {
        "ProductName": "Product123",
        "RequiredComponents": "CAP 10% H/Vol",
        "StockCode": "142111411",
        "RequiredQtyByBom": 4,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 40,
        "PCBReference": "442C",
        "QtyOnOrder": 26,
        "Vendors": [],
        "RequireVendor": false
    },
    {
        "ProductName": "Product123",
        "RequiredComponents": "Screws",
        "StockCode": "Screws",
        "RequiredQtyByBom": 1,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 14,
        "PCBReference": "Screws",
        "QtyOnOrder": 26,
        "Vendors": [
                      {"VendorID": "3", 
                      "VendorName": "ABC Supplier",
                      "VendorMOQ": 50000,
                      "VendorItemPrice": 322},
                      {"VendorID": "4", 
                      "VendorName": "DEF Supplier",
                      "VendorMOQ": 4,
                      "VendorItemPrice": 120}
                   ],
        "RequireVendor": true
    },
    {
        "ProductName": "Product123",
        "RequiredComponents": "14141415",
        "StockCode": "151555231",
        "RequiredQtyByBom": 1,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 170,
        "PCBReference": "1414",
        "QtyOnOrder": 26,
        "Vendors": [],
        "RequireVendor": false
    }

var data = {
    [ /* Your example data with products and nested vendors here */ ]
}

我正在考虑使用2个AJAX调用将值推送到可观察数组中

AJAX调用1：为产品创建初始有效负载

 MyDataViewModel.SelectedOrderID.subscribe = ko.computed(function () {
        $.ajax({
            url: "/URLToMethod/GetBomStockByProductID",
            data: { OrderID: ko.toJS(MyDataViewModel.SelectedOrderID) },
            type: "GET",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            timeout: 10000,
            success: function (Result) {
                for (var i = 0; i < Result.d.length; i++) {
                    element = Result.d[i];
                    MyDataViewModel.CheckStock.push({
                        ProductName: element.ProductName, RequiredComponents: element.RequiredComponents, StockCode: element.StockCode, RequiredQtyByBom: element.RequiredQtyByBom, QtyUnassignedInWarehouse: element.QtyUnassignedInWarehouse, QtyAllocatedInWarehouse: element.QtyAllocatedInWarehouse, PCBReference: element.PCBReference, QtyOnOrder: element.QtyOnOrder, Vendors: ko.observableArray(), RequireVendor: ko.computed(function () {
                            if ((element.RequiredQtyByBom * element.QtyOnOrder) > element.QtyAllocatedInWarehouse) {
                                return true
                            } else {
                                return false
                            }
                        })
                    }
                    );
                }
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    });

MyDataViewModel.SelectedOrderID.subscribe=ko.computed（函数（）{ $.ajax({ url:“/URLToMethod/GetBomStockByProductID”， 数据：{OrderID:ko.toJS（MyDataViewModel.SelectedOrderID）}， 键入：“获取”， contentType:“应用程序/json；字符集=utf-8”， 数据类型：“JSON”， 超时：10000， 成功：功能（结果）{ 对于（变量i=0；ielement.QtyAllocatedInWarehouse）{ 返回真值 }否则{ 返回错误 } }) } ); } }, 错误：函数（xhr，状态）{ 警报（状态+“-”+xhr.responseText）； } }); }); AJAX调用2：将值推送到在第一个有效负载中创建的供应商ko.observearray（）中

 MyDataViewModel.PurchaseReqHasVendorDetails = ko.computed(function () {
        var self = MyDataViewModel;
        for (var i = 0; i < self.CheckStock().length; i++) {
            if (self.CheckStock()[i].RequirePO()) {
                $.ajax({
                    url: "/URLToMethod/GetVendorsByProductName",
                    data: { ProductName: self.CheckStock()[i].ProductName },
                    type: "GET",
                    contentType: "application/json; charset=utf-8",
                    dataType: "JSON",
                    timeout: 10000,
                    success: function (Result) {
                        for (var i = 0; i < Result.d.length; i++) {
                            element = Result.d[i];
                            self.CheckStock()[i].Vendors.push({ VendorID: element.VendorID, VendorName: element.VendorName, VendorMOQ: element.VendorMOQ, VendorPrice: element.VendorPrice });
                        }
                    },
                    error: function (xhr, status) {
                        alert(status + " - " + xhr.responseText);
                    }
                });
                return true;
            } else {
                return false;
            }
        }
    });

MyDataViewModel.PurchaseReqHasVendorDetails=ko.computed（函数（）{
var self=MyDataViewModel；
对于（var i=0；i

但这不起作用。它创建了初始有效载荷，但没有获得第二个有效载荷并将其推入我创建的ObservalArray中

如果您有任何建议，我们将不胜感激。

您可以使用来轻松完成此操作。假设您从服务器检索到一个稍有不同的JS（或者在收到它后对其进行一点修改），如下所示：

    {
        "ProductName": "Product123",
        "RequiredComponents": "CAP 10% H/Vol",
        "StockCode": "142111411",
        "RequiredQtyByBom": 4,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 40,
        "PCBReference": "442C",
        "QtyOnOrder": 26,
        "Vendors": [],
        "RequireVendor": false
    },
    {
        "ProductName": "Product123",
        "RequiredComponents": "Screws",
        "StockCode": "Screws",
        "RequiredQtyByBom": 1,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 14,
        "PCBReference": "Screws",
        "QtyOnOrder": 26,
        "Vendors": [
                      {"VendorID": "3", 
                      "VendorName": "ABC Supplier",
                      "VendorMOQ": 50000,
                      "VendorItemPrice": 322},
                      {"VendorID": "4", 
                      "VendorName": "DEF Supplier",
                      "VendorMOQ": 4,
                      "VendorItemPrice": 120}
                   ],
        "RequireVendor": true
    },
    {
        "ProductName": "Product123",
        "RequiredComponents": "14141415",
        "StockCode": "151555231",
        "RequiredQtyByBom": 1,
        "QtyUnassignedInWarehouse": 0,
        "QtyAllocatedInWarehouse": 170,
        "PCBReference": "1414",
        "QtyOnOrder": 26,
        "Vendors": [],
        "RequireVendor": false
    }

var data = {
    [ /* Your example data with products and nested vendors here */ ]
}

创建视图模型非常简单，如下所示：

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);

如果您不希望自动生成视图模型，但使用自己的ViewModel构造函数函数，则可以使用映射插件添加其他“映射选项”。文档中有很多这样的例子

---

这里有一个包含您的数据的示例。

您想将其拆分为两个单独的Ajax调用的具体原因是什么？还有：你看过地图插件了吗？它似乎非常适合您的场景。@Jeroen我没有具体的理由将它们拆分为两个ajax调用，我基本上只想根据if

RequireVendor==“true”

填充可观察数组（供应商）。我见过映射插件，但从未真正使用过它，我该怎么做呢？映射插件很棒。非常易读且切中要害，还解释了如何映射嵌套数组以及如何使用键映射从/到服务调用进行更新。@Jeroen您是否可以添加一个任意示例来说明如何实现此嵌套，将标记为答案。谢谢你的帮助，先生！你是学者，也是绅士！！