How to iterate the Json object for a web service call?

Below is my payload for a given WebService in JSON format:

Code:

---

{
"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:

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

OK, assuming {...} is a placeholder for a valid object value for "SupplierPOLineList", there is no:

Code:

---

poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader.SupplierInvoiceList.SupplierInvoiceHeader

---

There is a:

Code:

---

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

---

So this line:

Code:

---

poInvoiceList1 = poInvoiceList.SupplierInvoiceList.SupplierInvoiceHeader;

---

should be:

Code:

---

poInvoiceList1 = poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader;

---

There could also be other problems.

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

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:

Code:

---

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

Code:

---

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

---

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

Code:

---

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:

Code:

---

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

---

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

Code:

---

Bob[0].sex

---

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

Code:

---

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

---

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

Code:

---

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.

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 :

Code:

---

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

---

I got the following errors:

Quote:

---

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:

Code:

---

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;

With:

Code:

---

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

---

poInvoiceList already is SupplierInvoiceHeader

So this line cannot find SupplierInvoiceHeader again:

Code:

---

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.

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

poInvoiceList = poInvoiceData.SupplierPOList.SupplierPOListDetails.SupplierPOHeader;
$.each(poInvoiceList[0].SupplierInvoiceList.SupplierInvoiceHeader, function( invoiceIndex, invoiceDetails ){

This works for me

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

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>