Trying to figure out how to add this javascript

So i want to make a list of these orders and implement a search function to it but i cant even figure the basics like now it just spams undefined on the html even though the "orderid" is a object on the json file. this is really hard to figure out and when i ask people, people give too straight forward messages to me that i cant figure it im not asking you guys to code for me but to point to right direction would helpful

const orderlist = document.getElementById('orderlist');
let orderid = [0];

const loadorders = async() => {
  try {
    const res = await fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py');
    orderid = await res.json();
    displayorderid(orderid);
  } catch (err) {
    console.error(err);
    console.log(res);
  }
};
const displayorderid = (orderid) => {
  const htmlString = orderid
    .map((order) => {
      return `
        <li class="orderid">
        <h2>${order.value}</h2>
        </li>
        `;
    })
    .join('');
  orderlist.innerHTML = htmlString;
};
loadorders();
body {
  font-family: Georgia, serif;
  background-color: rgb(59, 59, 243);
}

* {
  box-sizing: border-box;
}

h1 {
  color: azure margin-bottom:30px;
}

.container {
  padding: 35px;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center center;
}

#customerslist {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 15;
}

.Customer {
  list-style-type: none;
  background-color: aquamarine;
  border-radius: 5px;
  padding: 10px 25px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: ;
  text-align: left;
}
<div class="container">
  <h1>tilaukset</h1>
  <div id="search">
    <input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
  </div>
  <ul id="orderlist"></ul>
</div>

>Solution :

Here’s a working snippet. As mentioned by Kinglish (in the comments), the issue is there is no value property in the objects you are looping through it should say customerid instead.

const orderlist = document.getElementById('orderlist');
let orderid = [0];

const loadorders = async() => {
  try {
    const res = await fetch('https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py');
    orderid = await res.json();
    displayorderid(orderid);
  } catch (err) {
    console.error(err);
    console.log(res);
  }
};
const displayorderid = (orderObject) => {
  const htmlString = orderObject
.map((orderObject) => {
  return `
    <li class="orderid">
    <h2>${orderObject.customerid}</h2>
    </li>
    `; //<------- the customerid property exists
})
.join('');
  orderlist.innerHTML = htmlString;
};
loadorders();
body {
  font-family: Georgia, serif;
  background-color: rgb(59, 59, 243);
}

* {
  box-sizing: border-box;
}

h1 {
  color: azure margin-bottom:30px;
}

.container {
  padding: 35px;
  margin: 0 auto;
  max-width: 1000px;
  text-align: center center;
}

#customerslist {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 15;
}

.Customer {
  list-style-type: none;
  background-color: aquamarine;
  border-radius: 5px;
  padding: 10px 25px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: ;
  text-align: left;
}
<div class="container">
  <h1>tilaukset</h1>
  <div id="search">
    <input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
  </div>
  <ul id="orderlist"></ul>
</div>

Leave a Reply