带有 json 内容的映射下拉列表

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

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

您可以通过使用过滤器方法来做到这一点，因为您的数据位于数组中。

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

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

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

如果您想遍历所有ps，您可以执行以下操作

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

Answer 2

这就是我最终使用的......

//Put the json file to a variable
var location = 'folder/script.json';

//make a function called json, using the locaction variable
jQuery.getJSON(location, function(json) {


        jQuery("select").change(function(){

              jQuery(this).find("option:selected").each(function(){

                var optionValue = jQuery(this).attr("value");

                var i;
                for (i = 0; i < JSON.stringify(json.data[index].p.length); ++i) {
                  //console.log(i);

                  if (i == optionValue) {
                    console.log(optionValue);



                    var some_temp = JSON.stringify(json.data[index].p[i]["temperature"]);
                    var some_temp2 = Math.round(some_temp);
                    jQuery(".temp_div").html(some_temp2);


                }
              }
              });
            }).change();
});