0

Live CodeSandbox link.

I'm trying to access and pull in data from an API, specifically the price text value below:

"price": {
  "currency": "CAD",
  "text": "500"
},

JS code (everything else pulls in fine, just the <p>${product.price.text}</p> I'm having trouble with):

// Fetch Data
async function getData() {
  const res = await fetch(url);
  const data = await res.json();
  let output = "";
  // Loop through first 'groups' array
  data.groups.map(function (group) {
    // Loop through each 'equipments' array
    group.equipments.map((product) => {
      // Define below variable to match cat products only
      const catProducts =
        product["dealer-name"] === "CATERPILLAR FINANCIAL SERVICES CORPORATION";
      // If the dealer name is everything but cat products (aka only battlefield products)..
      if (!catProducts) {
        // Loop through each 'photos' array
        product.photos.map(() => {
          // Then output the data
          // If year is undefined, replace with empty string
          output += `
            <div class="card">
            <img class="img-fluid" src=${product.photos[0].text} alt=${
            product.model
          } />
            <div class="card--body">
              <h3>${product.year ?? ""} ${product.manufacturer} ${
            product.model ?? ""
          }</h3>
              <p>${product.city ?? "City Not Available"}, ${product.state}</p>
              <p>${product.hours} hours</p>
              <p>${product.price.text}</p> <--- Not working
              <a href='https://used.ca/en/${product["group-code"]}/${
            product["serial-number"]
          }' class="btn btn-primary">View Details</a>
              </div>
            </div>         
        `;
        });
      }
    });
  });
  // Add to slider
  $(".used-slider").slick("slickAdd", output);
}

getData();

Currently throwing a console error: "app.js:26 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'text')"

API structure:

{
  "version": "5",
  "company-code": "N001",
  "language-code": "en-CA",
  "total-count": 148,
  "created-date": "2021-09-22T18:12:03.2387128+00:00",
  "template-identifier": "4da31196-7f4b-4529-b832-90d40ef4a024",
  "group-type-code": "ProductFamilyCategory",
  "groups": [
    {
      "group-code": "Backhoe Loaders - Chargeuses-pelleteuses",
      "group-name": "Backhoe Loaders",
      "group-display-name": "Backhoe Loaders",
      "count": 7,
      "equipments": [
        {
          "id": "4536522",
          "dealer-name": "DEALER NAME",
          "GroupName": "Compact Track Loader",
          "product-family-code": "CTL",
          "product-family": "COMPACT TRACK LOADER",
          "product-family-display-name": "Compact Track Loader",
          "manufacturer-code": "CAT",
          "manufacturer": "MANUFACTURER",
          "model": "RUBBER TRACKS FOR CTL 259D ",
          "serial-number": "XXXXX",
          "year": "2016",
          "hours": 0,
          "city": "Ville St-laurent, Montréal",
          "state": "QC",
          "certification": "None",
          "availability": "Available",
          "price": {
            "currency": "CAD",
            "text": "500"
          },
          "product-family-categories": {},
          "photos": [
            {
              "text": "https://s7d2.scene7.com/is/image/CatUsedProduction/wtk?JHNyYz04ZjRjN2UyYzJkMzFmZWNjY2NiZDQ1MTc2NTA4MGY3MiYkdHh0PUJBVFRMRUZJRUxEJTIwRVFVSVBNRU5UJTIwUkVOVEFMUyUyMCUyOFFVJUMzJTg5QkVDJTI5JjUxMTY2"
            }
          ]
        }
      ]
    }
  ]
}

Anyone know why I'm unable to access the price text value but can access all the others?

2
  • It won't change the results, but you should use forEach() instead of map() if you're not using the returned array. Commented Sep 22, 2021 at 19:55
  • The error indicates that sometimes there isn't a price property in product. Commented Sep 22, 2021 at 19:58

1 Answer 1

1

The error implies that some products don't have a price property. You need to check for this before trying to access the text property. You can display a default placeholder instead.

You can use optional chaining to simplify this.

<p>${product.price?.text || "unknown"}</p> <--- Not working
Sign up to request clarification or add additional context in comments.

3 Comments

I've updated the code you suggested, I now receive the error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'text'). Any idea?
That's not possible, the whole point of conditional chaining is to prevent that error.
Isn't that the same error you were originally getting?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.