Map dropdown list with json content

Question

I have a JSON file that I wish to access, based on HTML option value attribute.

I can access the data, and pick stuff out, but like I wrote earlier, I like to do it based on what is chosen from the list.

So I wanna map option value attribute with p in the json file.

So my list looks like this

<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>

And my JSON looks like this:

{
  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
        }
      ]
    }
  ]
}

So the layout is based on what time it is, so I have this set up in 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----------------------------------------*/


  });
});

How should I approach the task? Having difficulties getting on. I'm a noob at this.

An exaple would be that Place1 should equal p[0], Place2 equal p[1] etc...

Answer 1

If I understand the question right, you first need to pick the right data set based on the date property and then you will filter it again based on the place.

You can do this by using the filter method as your data is in an array.

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

dataForDate will be another array and if you have only one matching property, you can access it by dataForDate[0]

After this you can implement the same filter function if you want to filter location data based on some property.

If you want to loop through all the ps you can do the following

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