javascript - 带有 json 内容的 map 下拉列表

Question

我有一个我希望访问的 JSON 文件，基于 HTML 选项值属性。

我可以访问数据并挑选内容，但就像我之前写的那样，我喜欢根据从列表中选择的内容进行操作。

所以我想在 json 文件中用 p 映射选项值属性。

所以我的列表看起来像这样

<div>
  <select id="places">
    <option>Choose city...</option>
    <option value="Place1">Place1</option>
    <option value="Place2">Place2</option>
    <option value="Place3">Place3</option>
  </select>
</div>

我的 JSON 看起来像这样:

{
  data: [{
      date: "2018031406",
      p: [{
          lon: -7.777,
          lat: xxxxx,
          precip - intensity: 0.046875,
          pressure - sealevel: 100225.25,
          temperature: 4.34227,
          wind - dir: 122.00003,
          wind - speed: 13.022041,
          weather - symbol: 3
        },
        {
          lon: -6.666,
          lat: xxxx,
          precip - intensity: 0.046875,
          pressure - sealevel: 100230.75,
          temperature: 3.77977,
          wind - dir: 120.87503,
          wind - speed: 13.006416,
          weather - symbol: 3
        }
      ]
    },
    {
      date: "2018031407",
      p: [{
          lon: -7.777,
          lat: xxxxx,
          precip - intensity: 0.046875,
          pressure - sealevel: 100225.25,
          temperature: 4.34227,
          wind - dir: 122.00003,
          wind - speed: 13.022041,
          weather - symbol: 3
        },
        {
          lon: -6.666,
          lat: xxxxx,
          precip - intensity: 0.046875,
          pressure - sealevel: 100230.75,
          temperature: 3.77977,
          wind - dir: 120.87503,
          wind - speed: 13.006416,
          weather - symbol: 3
        }
      ]
    }
  ]
}

所以布局是基于现在的时间，所以我在 jQuery 中设置了这个:

jQuery(document).ready(function() {

  var location = 'folder/folder2/folder3/area/area.json';


  jQuery.getJSON(location, function(json) {


    function pad2(n) {
      return n < 10 ? '0' + n : n
    }

    var date_now = new Date();

    date_test = date_now.getFullYear().toString() + pad2(date_now.getMonth() + 1) + pad2(date_now.getDate()) + pad2(date_now.getHours());


    var index = json.data.findIndex(function(item, i) {
      return item.date === date_test

    });

    //This I can use to see which index number is the current hour
    //I have weather data a couple of hours backwards, and alot forward (in time).

    //console.log(index);


    //Manually fetch data

    /*--------------------Temperature--------------------------------------*/

    //Lets say - index+1 is  date: "2018031407" and p[1] is the second p from json file - which indicates the hour now +1 (date) and area (p).

    var some_temp = JSON.stringify(json.data[index + 1].p[1]["temperature"]);

    //console.log(some_temp);

    var some_temp2 = Math.round(some_temp);

    console.log(some_temp2);

    jQuery(".div_temp").prepend(some_temp2);

    /*------------------------Temperature ends----------------------------------------*/


  });
});

我应该如何处理任务？上车有困难。我对此一窍不通。

一个例子是 Place1 应该等于 p[0]，Place2 应该等于 p[1] 等等......

Answer 1

如果我理解正确，您首先需要根据日期属性选择正确的数据集，然后根据地点再次过滤。

您可以使用 filter 方法来完成此操作，因为您的数据位于数组中。

var yourJson = "{}"; // your json variable
var dataForDate = yourJson.data.filter(function( obj ) {
  return obj.date == '2018031406'; // your filter criteria
});

dataForDate 将是另一个数组，如果您只有一个匹配的属性，您可以通过 dataForDate[0]

访问它

在此之后，如果您想根据某些属性过滤位置数据，您可以实现相同的过滤功能。

如果你想遍历所有的p你可以这样做

$.each( dataForDate[0].p, function( index, value ){
    // you can access all the properties here
    // example
    // value.lat
});