loading multiple json files in swagger-ui index.html

Question

I have 2 json files. In order to statically serve this, I was told to make a different variable for each json content and then add those right below url:url. My goal is to have 2 buttons on the main page, option 1 and option 2. Clicking on option 1 should load the spec swagger content, and clicking on option 2 should load the spec2 swagger content. What's an easy way of doing this?

Index.html:

<script type="text/javascript">
    $(function () {

var spec={
Json stuff goes here
}

var spec2={
Json stuff for #2 goes here
}

This is the swagger part in the same file. Right now only spec get's loaded initially.

var url = window.location.search.match(/url=([^&]+)/);
  if (url && url.length > 1) {
    url = decodeURIComponent(url[1]);
  } else {
    url = "http://petstore.swagger.io/v2/swagger.json";
  }

  hljs.configure({
    highlightSizeThreshold: 5000
  });

  // Pre load translate...
  if(window.SwaggerTranslator) {
    window.SwaggerTranslator.translate();
  }
  window.swaggerUi = new SwaggerUi({
    url: url,
    spec: spec,  // Here is where I call the variables
    spec2: spec2
    dom_id: "swagger-ui-container",
    supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
    onComplete: function(swaggerApi, swaggerUi){
      if(typeof initOAuth == "function") {
        initOAuth({
          clientId: "your-client-id",
          clientSecret: "your-client-secret-if-required",
          realm: "your-realms",
          appName: "your-app-name",
          scopeSeparator: ",",
          additionalQueryStringParams: {}
        });
      }

      if(window.SwaggerTranslator) {
        window.SwaggerTranslator.translate();
      }
    },
    onFailure: function(data) {
      log("Unable to Load SwaggerUI");
    },
    docExpansion: "none",
    jsonEditor: false,
    defaultModelRendering: 'schema',
    showRequestHeaders: false
  });

  window.swaggerUi.load();

  function log() {
    if ('console' in window) {


         console.log.apply(console, arguments);
        }
      }
  });
  </script>
</head>

Answer 1

What you've described is probably the easiest way to do it. Just edit your index.html to have a button, and trigger the load event for swagger-ui

First, create two containers:

<div id="swagger-ui-container-1" class="swagger-ui-wrap"></div>
<div id="swagger-ui-container-2" class="swagger-ui-wrap"></div>

Next, create two swagger objects and assign them to each of the containers:

  // create swagger_1, do the same with swagger_2

  var swagger_1 = new SwaggerUi({
    url: url,
    dom_id: "swagger-ui-container-1",
    supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
    onComplete: function(swaggerApi, swaggerUi){
      swaggerApi.setBasePath('/foo');
    },
    onFailure: function(data) {
      log("Unable to Load SwaggerUI");
    },
    docExpansion: "none",
    jsonEditor: false,
    apisSorter: "alpha",
    defaultModelRendering: 'schema',
    showRequestHeaders: false
  });

Finally, keep a reference to them in an array, and call load on each of them:

  window.apis = [swagger_1, swagger_2];
  window.apis[0].load();