PDA

View Full Version : How to iterate the Json object for a web service call?



shruz
12-01-2016, 07:17 PM
Below is my payload for a given WebService in JSON format:


{
"SupplierPOList": {
"RowCount": 1,
"SupplierPOListDetails": {
"SupplierPOHeader": [
{
"VendorSetid": "STATE",
"VendorId": "0000099475",
"POBusinessUnit": "DRC01",
"POId": "0000128530",
"PODate": "2014-01-13",
"ActivityDate": "2014-02-25",
"EnteredDate": "2014-01-13",
"DispatchDateTime": "2014-01-16T11:10:45.000000-05:00",
"DueDate": "2014-01-13",
"POAmount": 460.63,
"Buyer": "eSettlements Buyer User",
"PaymentTerms": "Net 30",
"CurrencyCd": "USD",
"OnHold": "No",
"POStatus": "Complete",
"POAckStatus": "Not Required",
"RecvStatus": "PO Not Received",
"SupplierPOLineList": {...},
"SupplierInvoiceList": {
"POBusinessUnit": "DRC01",
"POId": "0000128530",
"SupplierInvoiceHeader": [
{
"InvoiceDate": "2014-01-27",
"InvoiceId": "6942150",
"EnteredDate": "2014-02-03",
"InvoiceAmount": 460.63,
"APBusinessUnit": "DRC01",
"VoucherId": "00791073",
"DueDate": "2014-02-26",
"CurrencyCd": "USD",
"PaymentTerms": "Net 30",
"SupplierPaymentList": {
"APBusinessUnit": "DRC01",
"VoucherId": "00791073",
"SupplierPaymentHeader": [
{
"PaymentDate": "2014-02-26",
"PaymentId": "0007275500",
"PaymentIdRef": "0003501364",
"InvoiceId": "6942150",
"InvoiceDate": "2014-01-27",
"PaymentAmount": 460.63,
"CurrencyCd": "USD",
"PaymentMethod": "Electronic Funds Transfer",
"Name1": "HAZELDEN",
"Name2": null,
"Country": "USA",
"Address1": "PO BOX 176",
"Address2": null,
"Address3": null,
"Address4": null,
"City": "CENTER CITY",
"State": "MN",
"Postal": "55012-0176",
"BankAccount": "*****0207",
"PaymentStatus": "Paid"
}
],
}
}
],
}
}
],
}
}
}




How can I retrieve SupplierInvoiceHeader and the below operations in my service call? I'm able to produce data until SupplierInvoiceList with the below code:




0
down vote
accept
$.ajax({url:"/wps/proxy/http/10.249.114.31:8009/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId=", dataType:'json'

}).
then(function(poInvoiceData) {
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
poInvoiceList1 = poInvoiceList.SupplierInvoiceList.SupplierInvoiceHeader;
// poInvoiceList2 = poInvoiceList1.SupplierInvoiceHeader;
console.log("poInvoiceData",poInvoiceData);
console.log("poInvoiceList",poInvoiceList);
poInvoiceTemplate = generatePOInvoice(poInvoiceList1);
$("#poInvoiceListOutput").html(poInvoiceTemplate);

});

function generatePOInvoice(poInvoiceList1) {
let poInvoiceTemplate = '';
for (poInvoice of poInvoiceList) {
console.log("poInvoice=",poInvoice);
poInvoiceTemplate+=`<tr width=100%>
<td><a href="" style="color:black">${poInvoice.PaymentTerms}</a></td>

</tr>`;

}
console.log("poInvoiceTemplate",poInvoiceTemplate);
return poInvoiceTemplate;
}

Your help is highly appreciable!!!!

jscheuer1
12-02-2016, 07:51 AM
OK, assuming {...} is a placeholder for a valid object value for "SupplierPOLineList", there is no:


poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader.SupplierInvoiceList.SupplierInvoiceHeader

There is a:


poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader[0].SupplierInvoiceList.SupplierInvoiceHeader

So this line:


poInvoiceList1 = poInvoiceList.SupplierInvoiceList.SupplierInvoiceHeader;

should be:


poInvoiceList1 = poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader;

There could also be other problems.

shruz
12-02-2016, 04:38 PM
"Thanks John, for your reply

I did tried in that way, but it didn't work for me says that the variable is undefined
I tried using $each for lopping it worked but facing some issue like for some of the POId's the invoice is displaying some of them are showing null even though it is present in Payload

/*Service call for POInvoice List*/

function displayInvoiceInfo(POId){
url = "/wps/proxy/http/10.249.114.31:8009/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?
RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId="+POId;
alert(url);

$.ajax({url:url,
dataType:'json'

}).
then(function(poInvoiceData) {
alert(JSON.stringify(poInvoiceData));
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;

$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){
var invoicelistdetails = `<tr width=100%>
<td><a href="" style="color:black">${invoiceDetails.InvoiceId}</a></td>
</tr>`;
$("#poInvoiceListOutput").html(invoicelistdetails);
});
});
}

function generatePOInvoice(poInvoiceList) {
let poInvoiceTemplate = '';
for (poInvoice of poInvoiceList) {
console.log("poInvoice=",poInvoice);
poInvoiceTemplate+=`<tr width=100%>
<td><a href="" style="color:black">${poInvoice.InvoiceId}</a></td>

</tr>`;

}
console.log("poInvoiceTemplate",poInvoiceTemplate);
return poInvoiceTemplate;
}
"

jscheuer1
12-03-2016, 12:45 AM
Mmm, I'm never certain how much to say and what to leave out. And you really didn't answer my implied question, and I cannot be certain what's going on without seeing the page. Don't worry, we should be able to sort all that out.

First my implied question -

Is this:


"SupplierPOLineList": {...},

a stand in/abbreviation for a valid object? I ask because if that's literally what the JSON object contains, it's invalid, and there's no way to parse it as JSON. It could perhaps be parsed as text.

Second, what I didn't mention is that in order to parse a JSON object as complex as the one you have there (assuming it's valid, see above question), it's very helpful to have at least a basic understanding of javascript arrays and objects, their delimiters, and access notation. The immediate issue as I pointed out is that the property you were having trouble accessing is a value in an array that is a property of the object. In simplest terms, you were going for:

SupplierInvoiceHeader

as though it were a property of the object:

SupplierInvoiceList

But SupplierInvoiceList has no properties other than an array of which SupplierInvoiceHeader is a value. What I didn't mention though is that SupplierInvoiceHeader has no properties either other than its array. Anything in it that you want to address/access needs to also be preceded by the [0] signifying its array.

A simple example:


Bob = {"type" : "human", "sex" : "male"}

Is one thing, and you can get the sex of Bob with:


Bob.sex

That's basically what you were trying to do. But that's not the sort of structure you have. What you have is closer to:


Bob = [{"type" : "human", "sex" : "male"}]

In which, in order to get the sex, you need to do:


Bob[0].sex

The situation is further complicated because, well it's like so:


Bob = [{"type" : "human", "sex" : "male", "cousins" : [{"female": "Mary", "male" : "Ed"}]}]

in which, to get Mary, you need to do:


Bob[0].cousins[0].female

I hope that makes it clear. If not feel free to ask, but please first answer my initial question.

Also, if you want more help, please post a link to the page on your site that contains the problematic code, so we can check it out.


Additional understanding will come from understanding javascript arrays and objects which you can Google if you aren't familiar with them.

shruz
12-05-2016, 03:06 PM
Hi John,

Good Morning!

I'm glad to see your detailed explanation for my problem.
I agree with you for the above question you have asked, there {...} is a placeholder for a valid object value for "SupplierPOLineList",

Taking the arrays into consideration, I've declared in below way :


poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader[0].SupplierInvoiceList.SupplierInvoiceHeader;
poInvoiceList1 = poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader;

I got the following errors:


Uncaught TypeError: Cannot read property 'SupplierPOHeader' of null
Uncaught TypeError: Cannot read property 'SupplierInvoiceHeader' of undefined
Uncaught TypeError: Cannot read property 'SupplierInvoiceList' of undefined

So I've coded in this way and solved the problem, but it is always best practice to code in the way you suggested since I've to pull Payment information in the same way as Invoice details

My code now:


function displayInvoiceInfo(POId){
url = "/wps/proxy/http/10.249.114.31:8009/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId="+POId;
alert(url);

$.ajax({
dataType:'json',
type:'GET',
contentType : 'application/json',
url:url,
}).
then(function(poInvoiceData) {
alert(JSON.stringify(poInvoiceData));
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){
// alert(invoiceDetails.InvoiceId);
var invoicelistdetails = `<tr width=100%>
<td><a href="javascript:displayPaymentInfo(${invoiceDetails.InvoiceId})" style="color:black">${invoiceDetails.InvoiceId}</a></td>
</tr>`;
//generatePOInvoice(poInvoiceList);
$("#poInvoiceListOutput").html(invoicelistdetails);

});
});
}
now this is my second method followed by my first method which pulls all my purchase order list, I tried to pull invoice by clicking POId dynamically but I'm facing a problem that some of the values are displaying correct and some of the them showing 'null' by passing different POId by my surprise and showing of null even though invoice Id is present in the payload with the below url

url = "/wps/proxy/http/10.249.114.31:8009/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId="+POId;

jscheuer1
12-05-2016, 05:43 PM
With:


poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader[0].SupplierInvoiceList.SupplierInvoiceHeader;

poInvoiceList already is SupplierInvoiceHeader

So this line cannot find SupplierInvoiceHeader again:


poInvoiceList1 = poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader;

as it's not contained within itself.

As for the rest of the code, I really need to see the page.

shruz
12-05-2016, 06:31 PM
"John,

Unfortunately I don't have the provision to share you the page as I'm working on the portal which is on host server"

shruz
12-05-2016, 06:31 PM
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){

This works for me

shruz
12-05-2016, 08:06 PM
I need to pass two Id's in Javascript function to retrive the payment details
POId & InvoiceId

I'm passing like this :

$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){
// alert(invoiceDetails.InvoiceId);
var invoicelistdetails = `<tr width=100%>
<td><a href="javascript:displayPaymentInfo('"\+POId+\"${invoiceDetails.InvoiceId}')"

which is not working, Please help me out with correct syntax

shruz
12-05-2016, 08:11 PM
function displayInvoiceInfo(POId){
url = "/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId="+POId;
//alert(url);

$.ajax({
dataType:'json',
type:'GET',
contentType : 'application/json',
url:url,
}).
then(function(poInvoiceData) {
//alert(JSON.stringify(poInvoiceData));
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){
// alert(invoiceDetails.InvoiceId);
var invoicelistdetails = `<tr width=100%>
<td><a href="javascript:displayPaymentInfo('"\+POId+\"${invoiceDetails.InvoiceId}')" style="color:black">${invoiceDetails.InvoiceId}</a></td>

jscheuer1
12-06-2016, 03:18 PM
It's difficult to see just where the delimiters are and where the literal quotes belong. But I think it would be like so:


<td><a href="javascript:displayPaymentInfo(\'' + POId + '###${invoiceDetails.InvoiceId}\');" style="color:black">${invoiceDetails.InvoiceId}</a></td>

I would caution against using javascript href though. You very rarely need to get yourself into a situation where this kind of thing is required. It's often easier to keep things straight by generating markup and functions separately.

shruz
12-06-2016, 03:38 PM
Thanks for your response John... Glad to receive your support..Unfortunately your syntax didn't work saying : Uncaught ReferenceError: POId is not defined(…)
I've tried using in many ways infact, I'm calling my Javascript function there which is a seperate function

Functionality was onclick of each Invoice, I should display my Payment details:

My code::::

/* Service Call for displaying Invoice list for a Purchase Order*/

function displayInvoiceInfo(POId){
url = "/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId="+POId;

$.ajax({
dataType:'json',
type:'GET',
contentType : 'application/json',
url:url,
}).
then(function(poInvoiceData) {
//alert(JSON.stringify(poInvoiceData));
poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){
var invoicelistdetails = `<tr width=100%>
<td><a href="javascript:displayPaymentInfo(\'' + POId + '###${invoiceDetails.InvoiceId}\');" style="color:black">${invoiceDetails.InvoiceId}</a></td>
<td><a href="" style="color:black">${invoiceDetails.InvoiceDate}</a></td>
</tr>`;
$("#poInvoiceListOutput").html(invoicelistdetails);

});
});
}

/* Service Call for displaying Payment list for an Invoice */

function displayPaymentInfo(InvoiceId){
alert(InvoiceId); //alert(POId);
url = "/soa-infra/resources/SupplierPortal/GetSupplierPOListService!1.0/GetSupplierPOListService/Get?RecordName=OH_ESA_P_AL_LVW&VendorId=0000099475&VendorSetid=STATE&DateFrom=2014-01-01&DateTo=2015-01-01&ShowDetail=Y&POId=&InvoiceId="+InvoiceId;

$.ajax({
dataType:'json',
type:'GET',
contentType : 'application/json',
url:url,
}).
then(function(paymentData) {
//alert(JSON.stringify(paymentData));
purchaseOrderList = paymentData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
purchaseInvoiceList = purchaseOrderList[0].SupplierInvoiceList.SupplierInvoiceHeader;
$.each(purchaseInvoiceList[0].SupplierPaymentList.SupplierPaymentHeader, function( paymentIndex, paymentDetails ){
alert(paymentDetails.PaymentId);
var paymentListDetails = `<tr width=100%>
<td><a href="" style="color:black">${paymentDetails.PaymentId}</a></td>
</tr>`;
$("#invoicePaymentListOutput").html(paymentListDetails);
});
});
}

Your help is appreciated!! Thanks

shruz
12-07-2016, 02:12 PM
working now :)

Thank you !