如何從JSON / JSONP文件中提取和顯示數據？

Question

我想知道如何才能捕獲並在html文件中（使用純Javascript）顯示以下JSON文件中的以下對象？ 我特別需要獲取以下3個對象，並顯示每個對象的每個實例。“ barTitle”，“ id”並顯示所有“ OpenTimes”。

請注意，我確實已經將此文件上傳到Web服務器（ http://codepupil.com/js/bar.json ）。

 onBarLocationsLoaded({ "results":[ { "barCity":"Annapolis", "barState":"MD", "barZip":"21401", "recordingPhone":"410-213-1145", "distance":"2.10", "longitude":-725464, "latitude":489914, "barLong":-725464, "barLat":489914, "barLink":"http:\\/\\/www.bar.com\\/bar\\/bow-tie", "barName":"Bow Tie Bar", "movie":[ { "barTitle":"Bar Louie", "Id":"20057095", "openTimes":[ { "time":"12:00pm" }, { "time":"3:40pm" }, { "time":"6:40pm" } ] }, { "barTitle":"Bar Louise", "Id":"20057095", "openTimes":[ { "time":"12:00pm" }, { "time":"3:40pm" }, { "time":"6:40pm" } ] }, { "barTitle":"Bar Louie", "Id":"20057095", "openTimes":[ { "time":"12:00pm" }, { "time":"3:40pm" }, { "time":"6:40pm" } ] }, { "barTitle":"Bar Capo", "Id":"20057095", "openTimes":[ { "time":"12:00pm" }, { "time":"3:40pm" }, { "time":"6:40pm" } ] }, { "barTitle":"Bar Boo Boo", "Id":"20057095", "openTimes":[ { "time":"12:00pm" }, { "time":"3:40pm" }, { "time":"6:40pm" } ] }, } ] }); 

Answer 1

這是一個參數很大的函數調用

例如

function launchAnAlert(message) {
  alert(message);
}

這是一個js函數，它接受一個名為message的參數並對其進行處理。

如果您想調用該函數，您可以像這樣

launchAnAlert("This is my text message");

現在，讓我們看一下您的代碼片段，您可以看到它看起來像上一個調用，但是您傳遞的是Json對象作為參數，而不是String。

您的函數名稱為onBarLocationsLoaded ，因為您的代碼段具有以下形式

onBarLocationsLoaded(theJsonObject);

而且該Json對象存在錯誤。 您的Json文件應包含以下內容：

{
   "results":[
      {
         "barCity":"Annapolis",
         "barState":"MD",
         "barZip":"21401",
         "recordingPhone":"410-213-1145",
         "distance":"2.10",
         "longitude":-725464,
         "latitude":489914,
         "barLong":-725464,
         "barLat":489914,
         "barLink":"http:\/\/www.bar.com\/bar\/bow-tie",
         "barName":"Bow Tie Bar",
         "movie":[
            {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Louise",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Louie",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Capo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            },
            {
               "barTitle":"Bar Boo Boo",
               "Id":"20057095",
               "openTimes":[
                  {
                     "time":"12:00pm"
                  },
                  {
                     "time":"3:40pm"
                  },
                  {
                     "time":"6:40pm"
                  }
               ]
            }
         ]
      }
   ]
}

現在，如果您使用答案，則可以在這里找到： https : //stackoverflow.com/a/7220510/4088809

這應該可以回答您的問題，或者至少可以指示您的方向： http : //jsfiddle.net/hrncdj8e/