Trying to figure out how to add this javascript-CodePudding

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 >
        <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 >
  <h1>tilaukset</h1>
  <div id="search">
    <input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
  </div>
  <ul id="orderlist"></ul>
</div>

CodePudding user response：

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 >
    <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 >
  <h1>tilaukset</h1>
  <div id="search">
    <input type="text" name="Hakupalkki" id="Hakupalkki" placeholder="Hae tilausta" />
  </div>
  <ul id="orderlist"></ul>
</div>

CodePudding user response：

There is no value property of each object in the array. Try this for example:

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

const displayorderid = (orderid) => {
  const htmlString = orderid
    .map((orderid) => {
      return `
        <li >
        <h2>${orderid.customerid}</h2>
        </li>
        `; //<------- the customerid property exists
    })
    .join('');
  orderlist.innerHTML = htmlString;
};

const loadorders = async () => {
  try {
    const res = await fetch(
      'https://www.cc.puv.fi/~asa/cgi-bin/fetchOrders.py'
    );
    orderid = await res.json();
    console.log(orderid) //<------- use this to view the each object`s properties in the console
    displayorderid(orderid);
  } catch (err) {
    console.error(err);
    console.log(res);
  }
};

loadorders();

Hope this helps.