无法使用Fetch访问json元素

2wnc66cl  于 2023-03-09  发布在  其他
关注(0)|答案(2)|浏览(118)

我正在尝试获取一个json文件并在div中显示其元素。
这是我的json数据:

[
    {
       "0":{
          "host_id":"129230780",
          "host_names":"STK Homes",
          "host_since":"2017-05-07T12:45:49Z",
          "nb_listings":"2128",
          "langues":"['English']",
          "localisation":"Londres, Royaume-Uni",
          "is_superhost":"False",
          "is_viewer_profile_owner":"False",
          "reviews_count":"1228",
          "url":"https://fr.airbnb.ca/users/show/129230780"
       },
       "1":{
          "host_id":"121683635",
          "host_names":"Evolve",
          "host_since":"2017-03-20T16:26:31Z",
          "nb_listings":"700",
          "langues":"['English', 'Espa\u00f1ol', 'Fran\u00e7ais']",
          "localisation":"\u00c9tats-Unis",
          "is_superhost":"False",
          "is_viewer_profile_owner":"False",
          "reviews_count":"16495",
          "url":"https://fr.airbnb.ca/users/show/121683635"
       }
    }
]

这是我的代码,第一部分获取json数据,第二部分显示div中的两个元素(这里我只是打印结果):

fetch(json object)
        .then(function (response) {
          return response.json(); 
      })
        .then(function (data) {
          appendData(data);
      })
        .catch(function (err) {
        console.log(err);
      });

   
      function appendData(data) {
        for (var i = 0; i < data.length; i++) {
          console.log(data[0][i].host_id) // return just the first host_id
          console.log(data[i][i].host_id) // also return just the first host_id
        }
      }

我怎样才能返回所有的主机ID?

0pizxfdo

0pizxfdo1#

to要从JSON数据中返回所有主机ID,可以修改appendData函数,循环数组中的每个对象,然后循环对象中的每个键,以获取host_id值。

function appendData(data) {
  for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    for (var key in obj) {
      var host_id = obj[key].host_id;
      console.log(host_id);
      // You can append the host_id to a div element instead of logging to the console
    }
  }
}
pxy2qtax

pxy2qtax2#

有多种方法可以循环遍历 Package 在数组中的对象。

function main() {
  fetch('...')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      appendData(data);  // Scenario #1
      appendData2(data); // Scenario #2
    })
    .catch(function(err) {
      console.log(err);
    });
}

// Prop destructure + for-in loop
function appendData(data) {
  const [hostsObj] = data;
  for (let key in hostsObj) {
    const { host_id } = hostsObj[key];
    console.log(host_id);
  }
}

// Inline prop destructure + Object.values + forEach
function appendData2([hostsObj]) {
  Object.values(hostsObj).forEach(({ host_id }) => {
    console.log(host_id);
  });
}

// TEST ONLY :- Override / mock the default Fetch API
window.fetch = () => Promise.resolve({
  json: () => Promise.resolve([{
    "0": {
      "host_id": "129230780",
      "host_names": "STK Homes",
      "host_since": "2017-05-07T12:45:49Z",
      "nb_listings": "2128",
      "langues": "['English']",
      "localisation": "Londres, Royaume-Uni",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "1228",
      "url": "https://fr.airbnb.ca/users/show/129230780"
    },
    "1": {
      "host_id": "121683635",
      "host_names": "Evolve",
      "host_since": "2017-03-20T16:26:31Z",
      "nb_listings": "700",
      "langues": "['English', 'Espa\u00f1ol', 'Fran\u00e7ais']",
      "localisation": "\u00c9tats-Unis",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "16495",
      "url": "https://fr.airbnb.ca/users/show/121683635"
    }
  }])
});

main();
.as-console-wrapper { top: 0; max-height: 100% !important; }

相关问题