Trying to display a value from an array returned from external script

Question

<script>
var url = "https://api.bridgedataoutput.com/api/v2/zestimates?access_token=3c8b83bd020d7edb2083adccb0670b37&address=";
var path = url + avmaddr;
var my_script = document.createElement('script');
my_script.setAttribute('src',path);
document.head.appendChild(my_script);
</script>

avmaddr is being pulled from a form and passed to this page. As an example, when I put in an address in the form, path = https://api.bridgedataoutput.com/api/v2/zestimates?access_token=3c8b83bd020d7edb2083adccb0670b37&address=1021%20Fortrose%20Dr%2C%20Gallatin%2C%20TN%2037066

If you click on that URL, you’ll get this back…

        {
          "success": true,
          "status": 200,
          "bundle": [{
            "id": "133926112",
            "zpid": "99342382",
            "address": " 1021 Fortrose Dr Gallatin TN 37066",
            "coordinates": [-86.526053, 36.371459],
            **
            "zestimate": 471752,
            "upper": 508096,
            "lower": 443027 ** ,
            "date": "2020-02-19T00:00:00.000Z",
            "rental": {
              "zestimate": 2599,
              "upper": 2989,
              "lower": 2209,
              "date": "2020-02-18T00:00:00.000Z"
            },
            "foreclosureZestimate": null,
            "forecastStandardDeviation": 0.09985694289207458,
            "zillowUrl": "https://www.zillow.com/homedetails/99342382_zpid",
            "url": "api.bridgedataoutput.com/api/v2/zestimates/zestimates/133926112"
          }],
          "total": 1
        }

I want to display the value for “zestimate”, as well as “upper” and “lower”. Any advice would be appreciated! I'm not a developer, so I really have no clue what to do next!

Answer 1

use jQuery would make this easier first load jQuery in your html file, put this code in the head tag of your html file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" </script>

then in your Javascript file. use jQuery to call the api:

  $.ajax({
    url: "https://api.bridgedataoutput.com/api/v2/zestimates?access_token=3c8b83bd020d7edb2083adccb0670b37&address=1021%20Fortrose%20Dr%2C%20Gallatin%2C%20TN%2037066",
    dataType: "json",
    success: data => {
      //here you can do whatever you want to the response data:
      alert(data. zestimate);

    }
  })

Answer 2

You can try to use fetch to get the response from that url:

var url = "https://api.bridgedataoutput.com/api/v2/zestimates?access_token=3c8b83bd020d7edb2083adccb0670b37&address=";
var avmaddr = "1021%20Fortrose%20Dr%2C%20Gallatin%2C%20TN%2037066";

var path = url + avmaddr;

fetch(path).then(function (response) {
  return response.json();
}).then(function (data) {
  var zestimate = data.bundle[0].zestimate;
  var upper = data.bundle[0].upper;
  var lower = data.bundle[0].lower;
  
  console.log(zestimate);
  console.log(upper);
  console.log(lower);
});