0

When I output my code I get this output:

0[object Object]

1[object Object]

I believe this is because it is an object. Although I'm pretty noob, so I believe an object is an array. Correct me if that's wrong.

I noticed the object in my console:

Objectresult: Objectadmin_county: "Somerset"admin_district: "Sedgemoor"admin_ward: "Axevale"ccg: "NHS Somerset"codes: Objectcountry: "England"eastings: 343143european_electoral_region: "South West"incode: "2WL"latitude: 51.2870673059808longitude: -2.81668795540695lsoa: "Sedgemoor 001A"msoa: "Sedgemoor 001"nhs_ha: "South West"northings: 154531nuts: "Somerset"outcode: "BS26"parish: "Axbridge"parliamentary_constituency: "Wells"postcode: "BS26 2WL"primary_care_trust: "Somerset"quality: 1region: "South West"__proto__: Objectstatus: 200__proto__: Object

it maybe neater to look at this: https://api.postcodes.io/postcodes?lon=0.080647&lat=51.626281000000006&radius=115

I am trying to separate these parts into usable items stored as variables. I tried array[0] but that is undefined. Which I assume means I need to do something more like object(array[0])

I've been searching a while and I'm not getting anywhere.

Here's my full code that I was forking from elsewhere.

$(window).ready(function() {
  $(initiate_geolocation);
});

function initiate_geolocation() {
  navigator.geolocation.getCurrentPosition(handle_geolocation_query);
}

function handle_geolocation_query(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var url = "https://api.postcodes.io/postcodes?lon=" + lon + "&lat=" + lat + "&radius=125";
  post(url).done(function(postcode) {
    displayData(postcode);
    // console.log("postcode says: "+postcode);
    console.log(postcode[0[1]]);
  });
}

//display results on page
function displayData(postcode) {
  var html = "";
  $('#text').hide();
  for (var index in postcode['result']) {
    html += "<div class='row'>";
    html += "<div class='cell'>";
    html += index.replace(/_/g, ' ').strFirstUpper();
    html += "</div><div class='cell'>";
    html += postcode['result'][index];
    html += "</div></div>";
    console.log(postcode)
  }
  $('#text').html(html).fadeIn(300);
}

//ajax call
function post(url) {
  return $.ajax({
    url: url,
    success: function() {
      //woop
    },
    error: function(desc, err) {
      $('#text').html("Details: " + desc.responseText);
    }
  });
}

//uppercase 
String.prototype.strFirstUpper = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}
@import url(//fonts.googleapis.com/css?family=Roboto);
html {
  font-family: 'Roboto', sans-serif;
}

.header {
  position: fixed;
  z-index: 10;
  width: 100%;
  background: -moz-linear-gradient(90deg, #394D66, #3A5B85);
  background: linear-gradient(90deg, #394D66, #3A5B85);
  height: 80px;
  min-width: 500px;
}

h1 {
  font-weight: 400;
  text-align: center;
  margin: 0px;
  font-size: 1.5em;
  color: #9DC3EB;
  text-transform: uppercase;
}

h1 span {
  font-size: 0.8em;
  text-transform: lowercase;
  color: #E0E0E0;
}

.row {
  width: 100%;
  font-size: 1.2em;
  padding: 5px 0px;
  border-bottom: 1px solid #ccc;
}

.inputHolder {
  width: 100%;
  font-size: 20px;
  text-align: center;
}

.inputHolder input {
  text-align: center;
  color: #333;
}

.cell {
  display: inline-block;
  width: 49%;
  color: #393939;
}

.row .cell:first-child {
  text-align: right;
  padding-right: 10px;
}

.row:hover {
  background: #ccc;
}

#text {
  z-index: 0;
  padding: 90px 0px;
  width: 60%;
  margin: 0px auto;
  min-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class='header'>
  <h1><span>Postcode Seach with</span> Postcodes.io</h1>
  <!-- <div class='inputHolder'>
    <input placeholder='Postcode' type='text' id='txtPostcode'/>
    <input type='button' value='Search' id='btnPostcode'/>
  </div>
  -->
</div>


<div id='text'></div>

Eventually i want this code to ask you for permission to discover your location when you open the page and then find your post code (using postcode.io). I've got most of the way there but my noobishness is hurting me badly. Any help is much appreciated.

The code must be https to run geolocation.

Barmar
  • 741,623
  • 53
  • 500
  • 612
Eoin
  • 1,413
  • 2
  • 17
  • 32
  • 1
    Post your code here, not just at a remote site. You can use [Stack Snippets](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) to make it executable. – Barmar May 19 '17 at 22:49
  • Thank you, although that does seem a little less neat than the other way I do see the point. – Eoin May 19 '17 at 22:58
  • 1
    `postcode[0[1]]` makes no sense. `0` isn't an array, why are you trying to subscript it? Did you mean `postcode[0][1]`? – Barmar May 19 '17 at 23:00
  • I got it working with `console.log(postcode['result'][0]['postcode'])` – Eoin May 19 '17 at 23:04
  • @Barmar to be honest I'm so noob I was just trying things. I knew there was an array but I was unsure as to how to access it. Once I saw in the other part of the code they had used [result][index] I was able to work out how to access it. I'll get there one day :) – Eoin May 19 '17 at 23:05
  • 1
    See http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-json – Barmar May 19 '17 at 23:06
  • @Barmar if you put that as the answer I will mark it as correct – Eoin May 19 '17 at 23:39
  • 1
    I'd prefer to close it as a duplicate of that question, but I already voted to close with a different reason. – Barmar May 19 '17 at 23:41
  • Sure whichever is best. Thanks for your help it's really appreciated. – Eoin May 19 '17 at 23:47

0 Answers0