How to fetch an array object from json file

Question

JSON: https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py

Im trying to fetch objects and arrays within the object but im only fetching the objects.

How do i fetch also "products" arrays?

My javascript code:

fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py')
  .then(res => res.text())
  .then(teksti => tulostus(teksti))

function tulostus(txt) {
    console.log(txt);
    let tilaukset = JSON.parse(txt);
     console.log(tilaukset);

    let a = "<table><tr><th>orderid</th><th>customerid</th><th>customer</th><th>invaddr</th><th>delivaddr</th><th>deliverydate</th><th>respsalesperson</th><th>comment</th><th>totalprice</th></tr>";
    for(let i = 0; i < tilaukset.length; i++) {
        let tilaus = tilaukset[i];
        console.log(tilaus)
        console.log(tilaus.orderid);
        a += '<tr><td>' + tilaus.orderid + '</td><td>' + tilaus.customerid + '</td><td>' + tilaus.customer + '</td><td>' + tilaus.invaddr + '</td><td>' + tilaus.delivaddr + '</td><td>' + tilaus.deliverydate + '</td><td>' + tilaus.respsalesperson + '</td><td>' + tilaus.comment + '</td><td>' + tilaus.totalprice + '</td></tr>'
    }   
    console.log(a);
    document.getElementById('info').innerHTML = a+'</table>';
}

Welcome to SO. You might find reading the site help section useful when it comes to asking a good question, and this question checklist. Code that you have worked on to solve the problem should include a minimal reproducible example, and be included in your question, and not as images. It's very difficult to debug an image. You can add code using the snippet tool [<>] in the toolbar. — Andy
– Andy, Commented Nov 30, 2022 at 17:43
.py is a sketchy/confusing extension for JSON. Valid JSON is not necessarily valid Python (If that's even what that extension means) — Wyck
– Wyck, Commented Nov 30, 2022 at 17:52
@Wyck that's a url, it's quite possibly responding with the header Content-Type: "application/json" — KernelDeimos
– KernelDeimos, Commented Nov 30, 2022 at 17:53
Why do you use .text instead of .json when parsing a json? — Konrad
– Konrad, Commented Nov 30, 2022 at 18:10
Ah I get it now. It's a python "cgi" script that is serving up the JSON. My bad. Makes sense. I think my eyes glossed over cgi-bin the first time I read it. — Wyck
– Wyck, Commented Nov 30, 2022 at 18:27

KernelDeimos · Accepted Answer · 2022-11-30 17:58:57Z

0

You likely are fetching the products array but need to add some code to iterate over it.

    for(let i = 0; i < tilaukset.length; i++) {
        let tilaus = tilaukset[i];
        console.log(tilaus)
        console.log(tilaus.orderid);
        a += '...'

        for (let j=0; j < tilaus.products.length; j++) {
          console.log(tilaus.products[i].name);
        }
    }

Replace the console log in the loop with some code to write to the html as you were doing above. Depending on how you'd like it to look at might get tricky, so consider abstracting away HTML generation or using a library that helps you componentize the ui.

answered Nov 30, 2022 at 17:58

KernelDeimos

6315 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kundan · Accepted Answer · 2022-11-30 18:05:33Z

0

    fetch("https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py").
        then(response => response.json())
        .then(result => display(result))

    let display = (result) => {
        for (let i = 0; i < result.length; i++) {
            let products = result[i].products 
            // here products is a Object array

            for(let i=0;i<products.length;i++){
                let product = products[i];
                console.log(product)
                // add your stuff here like product.orderid to get orderid
            }
           
        }
    }

answered Nov 30, 2022 at 18:05

kundan

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Suhail Qureshi · Accepted Answer · 2022-11-30 18:13:38Z

0

you're already looping over the array and getting the object from there, if you check there's product array there in every array value(tialus.products) just save that value in a variable

answered Nov 30, 2022 at 18:13

Suhail Qureshi

1006 bronze badges

Collectives™ on Stack Overflow

How to fetch an array object from json file

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related