如何根據選定的值加載 JSON 數據

Question

我是新手，我不知道我做錯了什么。

在我的 json 文件中，我有幾行，但我只需要記錄請求的

<a href="#" id="get-data" data-id="100" data-foo="100">Get JSON data</a>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


  <script>

      $('#get-data').click(function () {

          var myDiv = document.querySelector('#get-data');

          var mySetValue = myDiv.dataset.foo


          console.log (mySetValue)
          var showData = $('#show-data');
          var url = 'example.json';
          var data = {
              value: mySetValue
          };
          $.getJSON(url, data) 
            console.log(data);
      });


  </script>

這是我的 json 文件

[
{
  "key": "First",
  "value": 100
},{
  "key": "Second",
  "value": false
},{
  "key": "Last",
  "value": "Mixed"
},
  {
  "key": "First",
  "value": 100
},{
  "key": "Last",
  "value": "Mixed"
},
  {
  "key": "First",
  "value": 100
},{
  "key": "Second",
  "value": false
},{
  "key": "Last",
  "value": "Mixed"
}]

我只需要加載與我的按鈕的 data-foo 關聯的數據，但相反，我只得到一個值作為回報。

我究竟做錯了什么？

先感謝您

Answer 1

我注意到您使用 Jquery 作為 API，在 Jquery 中有一個 ajax 函數，您可以使用它幫助從 ajax 文件/響應中獲取信息。

在W3S 中閱讀有關Jquery Ajax 的更多信息

您的代碼將導致類似的結果。

$.ajax({

    url: '/file.json',          
    success: function(data){ 

        console.log(data);

    }
});

可能發生的問題

1. 如果您沒有在 PHP 服務器上運行它或具有“跨域”權限，HTML/PHP 將不會授予您打開“外部文件”的權限

2. Ajax是一個異步函數，這意味着如果你在里面賦值一個X值，它只會在外部結構執行完后才賦值……簡而言之，它先執行ajax外面的東西，然后執行里面的東西，可以使用promise和await/async 函數來解決這個問題

要使用承諾進行等待，您必須有一個異步函數的“主”函數，否則該函數將不接受等待條件。

解決異步問題。

async function main(){

    var result = await getAssycFunction();

    console.log(result);

}

function getAssycFunction(){

    return new Promise((result, reject) =>{

        result("Result");

    });

}

正如您在評論中問我的那樣，要分隔值並沒有“神奇功能”，但是可以做的是一個循環，它遍歷所有房屋並在第二個數組中僅將您想要的房屋分開。

var values = [];

for (var i = 0; i < data.length ; i++) {

    if (data[i]['value'] == 100) {

        values.push(data[i]);
    }

}

result(values);

一個小提示：不要在分離變量時對最終用戶隱藏信息，一旦您有 Ajax 請求，用戶就可以訪問 ajax 文件以能夠讀取。