解析XML时JSON异常：Oracle CLOB XML转AngularJS UI Grid报错

Let's break down your problem and fix it step by step:

Root Cause Analysis #

You're hitting two main issues here:

1. Invalid Backend JSON Format: The EMAIL_XML field in your JSON response has broken syntax—there are extra double quotes and spaces splitting the XML content into multiple string segments (like "<email ...>"" <name .../>""). This violates JSON rules, causing the "Unexpected string" parsing error.
2. Frontend Data Binding Mistake: You're using JSON.stringify() on response.data.events and assigning the resulting string to $scope.gridOptions1.data. AngularJS UI Grid requires JavaScript objects/arrays as data sources, not JSON strings—this would prevent the grid from rendering data even if the JSON parsed correctly.

Step 1: Fix the Backend JSON Response #

The EMAIL_XML value must be a single, properly escaped string. Remove the extra double quotes and spaces that split the XML content, ensuring the entire XML is one continuous string with internal double quotes escaped as \".

Here's the corrected JSON structure:

{"events":{"ORDER_NO":"BBY01-100000709660","ORDER_HEADER_KEY":"2020040811522311790606 ","CREATETS":"2020-04-08 11:52:47","TMPLT_NM":"EOMS_0194 ","EMAIL_XML":"<email CommunicationType=\"Email\" SourceSystem=\"OMS\" TemplatePageZone=\"\" brand=\"BESTBUY\" channel=\"BESTBUY\" emailAddr=\"test.tester@bestbuy.com\" template=\"EOMS_0178_TEST\"><name firstName=\"Test\" lastName=\"\" middleInitial=\"\"/><order ATGID=\"ATG28268080246\" IsSuppressRequired=\"Y\" LoggedInFlag=\"Y\" LoyaltyID=\"0160140134\" OrderName=\"MSFTAllAccess\" PartyID=\"123456\" PriorityNumber=\"160140134\" customerPhoneNo=\"6515554321\" hasActivatedDevice=\"N\" orderDate=\"01/28/2020\" orderHeaderKey=\"2020012813423582265743\" orderIdATG=\"BBY01-1MT2010012802\" orderStatusLinkDisplayFlag=\"Y\" orderTotal=\"0.00\" orderTotalMinusCoupons=\"0.00\" partnerID=\"\" partnerOrderNo=\"MAV513281qweq1\" salesSource=\"BBYC\" shippingTotal=\"0.00\" taxTotal=\"0.00\"><creditCard cardType=\"\" number=\"\"/><digitalCoupons digitalCouponTotal=\"0.00\"/><lineItems><lineItem CustPromiseDate=\"02/26/2020\" CustPromiseType=\"InHandDate\" availabilityMsg=\"\" beginEstArrivalDate=\"02/24/2020\" conditionVariableOne=\"\" conditionVariableTwo=\"\" description=\"Microsoft Surface Pro 3 12 Intel Core i7 256GB Silver\" endEstArrivalDate=\"02/26/2020\" expectedShipDays=\"\" format=\"\" giftPackaging=\"N\" inHandDate=\"02/26/2020\" itemID=\"\" itemShortDesc=\"Microsoft Surface Pro 3 12 Intel Core i7 256GB Silver\" lineItemProductTotal=\"0.00\" lineItemShippingCost=\"0.00\" merchClass=\"\" modelNo=\"1000186097\" orderLineKey=\"2020021911334791500160\" oversizeFlag=\"\" pickupDate=\"\" preOrder=\"\" primeLine=\"1\" productLine=\"6.403.635\" quantity=\"1\" releaseDate=\"\" reshipReasonCode=\"RESHIP_DAMAGED_ITEM\" shipDate=\"\" shippingMethod=\"\" signatureRequiredFlag=\"N\" sku=\"9248206\" status=\"\" subLine=\"1\" tax=\"0.00\" total=\"0.00\" unitPrice=\"0.00\" unitShippingCost=\"0.00\"><shippingAddr city=\"RICHFIELD\" line1=\"1000 W 78TH ST\" line2=\"\" state=\"MN\" zip=\"55423\"><name firstName=\"Test\" lastName=\"Tester\" middleInitial=\"\"/></shippingAddr><allowance allowanceAmt=\"0.00\" reason=\"\"/><return date=\"\" lineQty=\"\" lineTotal=\"0.00\" productCredit=\"0.00\" reason=\"\" restockingFee=\"0.00\" shippingCredit=\"0.00\" taxCredit=\"0.00\"/><cancel backOrderExtendedXNumDays=\"\" reason=\"\"/><ros actualDeliveryDate=\"\" pickupDate=\"\"/><store storeName=\"\" storeNum=\"\"/><psp plan=\"\"/><carriers><carrier los=\"\" name=\"\" quantity=\"\" trackingNum=\"\"/></carriers></lineItem></lineItems><makeGood makeGoodFlag=\"N\"/></order><account atgProfileId=\"\" cirisID=\"\" info=\"\" password=\"\"/><comments/></email>"}}

Step 2: Fix the Frontend AJAX Code #

Remove the unnecessary JSON.stringify() call, and ensure you're passing a JavaScript array to the grid's data property (UI Grid expects an array even for single records). Here's the cleaned-up code:

$http.get(url).then(function(response) { 
    if(!response.data.events){ // Simplified null/undefined check
        $("#loader1").hide(); 
        $scope.close = true; 
        $scope.responseMessage = ""; 
        $scope.gridOptions1.data = []; // Clear data properly
        $scope.errorMessage = "Order not found!!!!"; 
    }else{ 
        console.log("1"); 
        $("#loader1").hide(); 
        // Wrap the single event object in an array for UI Grid compatibility
        $scope.gridOptions1.data = [response.data.events]; 
        $scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows(); 
        $scope.close = true; 
        $scope.errorMessage = ""; 
        $scope.responseMessage = "Order details fetched successfully"; 
    } 
}, function(response) { 
    $("#loader1").hide(); 
    $scope.close = true; 
    $scope.responseMessage = ""; 
    $scope.gridOptions.data = []; 
    $scope.gridOptions1.data = []; 
});

Bonus: Make XML Content Readable in the Grid #

If you want to display the EMAIL_XML content as human-readable XML instead of escaped text, add this step before assigning the data:

const eventData = response.data.events;
// Convert escaped XML entities back to actual tags
eventData.EMAIL_XML = eventData.EMAIL_XML.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
// Assign to grid data
$scope.gridOptions1.data = [eventData];

内容的提问来源于stack exchange，提问作者brainSquezer