0

I am trying to display API information using swagger UI. I have a link for swagger.json with all the API details. I am trying to fetch it and then remove some API(spec.js) and then display the result in the html(index.html). But as it is returning Object.Promise, I can't get the result.

Here is my code

spec.js

function load (url) {
  return new Promise(async function (resolve, reject) {
    // do async thing
    const res = await fetch(url)

    // your custom code
    console.log('Yay! Loaded:', url)

    // resolve
    resolve(res.json()) 
  })
}

// run the function and receive a Promise
export const spec = load('https://..../swagger.json')
let swaggerJson;
// let the Promise know what you want to do when it resolves
spec.then(
  each => {
    for (let xy in each.paths) {
       delete each.paths[xy]['options']
    }
    swaggerJson = each;
    console.log(each) // getting expected result
    
    return each;
  }
)
console.log(" swaggerJson " + swaggerJson) // This is returning undefine

and in index.html, I am trying to access the spec.js

index.html

<body>
    <div id="swagger-ui"></div>
   <script src='spec.js' type="text/javascript">
   </script>
    <script src="./swagger-ui-bundle.js"> </script>
    <script src="./swagger-ui-standalone-preset.js"> </script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   
    <script>
    window.onload = function() {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        //url: 'https://dev-str-smt-repository.s3.us-west-2.amazonaws.com/dist/swagger.json',
        spec: spec,
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })
      // End Swagger UI call region

      window.ui = ui
    }
  </script>
  </body>

I am getting the following error.

index.html:47 Uncaught ReferenceError: spec is not defined at window.onload (index.html:47:15)

Can I please get some idea on how to store the fetched data in spec.js and display it in index.html?

Thanks in advance

Rhea
  • 381
  • 1
  • 7
  • 22
  • [Never pass an `async function` as the executor to `new Promise`](https://stackoverflow.com/q/43036229/1048572)! – Bergi Feb 02 '23 at 23:59
  • Where you have the expected result is where you should have all code that depends on this result, or *call* a function from there that deals with the result. You cannot output *now* (outside the `then` callback) what is only available in the *future* (inside the `then` callback). – trincot Feb 03 '23 at 09:03

0 Answers0