Chrome 扩展获取/设置数组显示在控制台中，但不在 html dom 中答案

【问题标题】：Chrome Extension Get/Set Arrays display in console but not in html domChrome 扩展获取/设置数组显示在控制台中，但不在 html dom 中
【发布时间】：2021-12-07 10:32:15
【问题描述】：

我正在 html 中显示我的数组。我正在尝试在我的 Chrome 扩展程序中实现这一点。我可以在 console.log 中完美地看到数组，但是在尝试将其添加到 html dom 时却看不到：

    /* Creates the array for chrome extension */
    chrome.storage.local.get({wsitemadded: []}, function (result) {
      var wsitemadded = result.wsitemadded;
    /* Collects the desired data */
      var witenumfetch = $('#wsitemnumber').text();
      var wspecialtitlefetch = $('#title').val();
      var wspecialprice = $('.mwsb-wsp').text();
      var wspecialprevprice = $('.mwsb-prevprice').text();
      var wspecialdeldate = $('.mwsb-deldate').text();
      var wspecialimg = $('#postad-img-0 div img').attr('src'); 
      /* Pushes the Data into the Arrays (Key/Value) */
      wsitemadded.push({WSItemNumber: witenumfetch, WSTitle: wspecialtitlefetch, WSImage: wspecialimg, WSPrice: wspecialprice, WSPrevPrice: wspecialprevprice, WSDELDate: wspecialdeldate});
      
      chrome.storage.local.set({ wsitemadded: wsitemadded });
    });
   /* Displays current stored Arrays */
    setTimeout(
      function(){
      chrome.storage.local.get({wsitemadded: []}, function (result) {
        var wsitemadded = result.wsitemadded;
        console.log(wsitemadded); /* Displays the Arrays correctly in Chrome Dev console */
        $('#anydiv').text(wsitemadded); /* Should display all the Array data */
      });
     }, 300);

上面的代码应该显示#anydiv中的所有Array信息对吗？

但是，我得到的唯一信息是：[object Object],[object Object]

我也试过.toString()，但没有帮助。

我不确定JSON.stringify 是否可以帮助我，如果可以，我将如何实施？

我已经为此困扰了几个小时，进行了如此多的研究，现在我觉得我的大脑被打乱了，我错过了一些明显的东西？非常欢迎任何帮助。请:-)

【问题讨论】：

猜猜没人再使用堆栈溢出了，哈哈

标签： javascript arrays json string object

【解决方案1】：

您是否已经尝试过以下方法？

$('#anydiv').text(JSON.stringify(wsitemadded));

如果它不能正常工作，你应该显示你在控制台中看到的内容，用于 console.log(wsitemadded)。

【讨论】：