Marzipano cannot integrate with data grabbed from Fetch API

Question

I have some questions regarding using data from the API endpoint and putting them into the panorama setting by marzipano site. When I try to connect to the local host, it always gives me a black screen with some weird bugs. The

bug

Below is the bug in the file index.js.

// Detect desktop or mobile mode.
  if (window.matchMedia) {
    var setMode = function() {
      if (mql.matches) {
        document.body.classList.remove('desktop');
        document.body.classList.add('mobile');
      } else {
      
     // Here is the bug document.body.classList.remove('mobile');
     // VM1193 index.js:40 Uncaught TypeError: Cannot read 
     // properties of null (reading 'classList')
     // at setMode (VM1193 index.js:40:23)
     // at VM1193 index.js:45:5
     // at VM1193 index.js:392:3

        document.body.classList.remove('mobile');
        document.body.classList.add('desktop');
      }
    };
    var mql = matchMedia("(max-width: 500px), (max-height: 500px)");
    setMode();
    mql.addListener(setMode);
  } else {
    document.body.classList.add('desktop');
  }

// Viewer options.
  var viewerOpts = {
    controls: {
    // Here is the bug data.settings.mouseViewMode
    // index.js:66 Uncaught TypeError: Cannot read properties of
    // undefined (reading 'settings')
    // at index.js:66:27
    // at index.js:392:3
      mouseViewMode: data.settings.mouseViewMode
    }
  };

The index.js file is generated by Marzipano, and I did not change any codes inside. The only file I changed is the data.js file. When I did not use the fetch API to get the data from the website, it works totally fine. But if I add the statement "import fetch from 'node-fetch';", it will crash.

Below is the code how I tried to get data from the web.

import fetch from 'node-fetch';
async function getUser(url) {
  try {
    const response = await fetch(url);
    //console.log(response);
    if (!response.ok) {
      throw new Error(`Error! status: ${response.status}`);
    }

    const result = await response.json();
    let data1 = await result[result.length-1]['data1'];
    return {
      'data1': data1,
    };
  } catch (err) {
    console.log(err);
  }
}
async function update_API(){
  let data = await getUser(API_url);
  var APP_DATA = {
    "scenes": [
      {
        "id": "some image id",
        "name": "image name",
        "levels": [
          {
            "tileSize": 256,
            "size": 256,
            "fallbackOnly": true
          },
          {
            "tileSize": 512,
            "size": 512
          },
          {
            "tileSize": 512,
            "size": 1024
          },
          {
            "tileSize": 512,
            "size": 2048
          }
        ],
        "faceSize": 1520,
        "initialViewParameters": {
          "pitch": 0,
          "yaw": 0,
          "fov": 1.5707963267948966
        },
        "linkHotspots": [
          {
            "yaw": -2.771335362922997,
            "pitch": 0.5852719406432207,
            "rotation": 3.141592653589793,
            "target": "1-img_20220708_192930_00_merged"
          }
        ],
        "infoHotspots": [
          {
            "yaw": -2.788116932948755,
            "pitch": 0.2275120663788961,
            "title": "Example 1",
            "text": "[data 1] " + data1
          }
        ]
      }
      ],
      "name": "Trial 1",
  "settings": {
    "mouseViewMode": "drag",
    "autorotateEnabled": true,
    "fullscreenButton": true,
    "viewControlButtons": true
  }
};

I tried to search for a solution but can't. I am wondering if I used it incorrectly or there should be some issue between Marzipano site and Fetch API?

---Edit for HTML code---




Project name













  
    
      
        data 1

Marzipano cannot integrate with data grabbed from Fetch API

0 Answers