Json Parsing Error - Unexpected Token O In Json At Position 1

I need to take a JSON object and get the titles console logged for an auto complete feature. AN example of what my json looks like is below: [ { 'title': 'Example 1', 'ur

Solution 1:

If your data has the format:

[
  {
    "title": "Example 1",
    "url": "http:\/\/www.example1.com\/"
  },
  {
    "title": "Example 2",
    "url": "http:\/\/www.example2.com\/"
  },
...

To print each title/url, you need to iterate through the result (using a for or calling forEach as below):

$.ajax({
  type: "GET",
  dataType: 'json',
  url: "https://api.myjson.com/bins/1czpnp",
  success: function(data) {
    console.log(data.title); // undefinedconsole.log(data); // the [{...}] object// to print the title/urls, iterate over the array// alternative 1 (ordinary for):for(var i = 0; i < data.length; i++) {
      var d = data[i];
      console.log('title: ' + d.title + ' ~ url: ' + d.url);
    };

    // alternative 2 (forEach):
    data.forEach(function (d) {
      console.log('title: ' + d.title + ' ~ url: ' + d.url);
    });
  },
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Comments questions

console.log(data.title); is undefined because we are not looping through it, right?

Kind of. It is undefined because data is an array. And JavaScript arrays don't have a title property.

in the line data.forEach(function (d) { , what exactly is (d)? Where is that value coming from? What does it represent?

.forEach is a method present in JavaScript arrays. It takes a function as argument and then calls that function on each element of the array.

Example:

var myArray = [1, 2, 3];
myArray.forEach(function (number) { console.log(number); });

Will print in the console:

1
2
3

Which is the result of calling function (number) { console.log(number); } three times (one for each element of the myArray array), where the first number value will be 1, the second time it will be 2 and the last time it will be 3.

And why does the vanilla JS loop not pass in (d)

A for is a mere execution of a given statement a given number of times. It does not pass d because there is no function argument involved (as it happens with .forEach).

In other words, a for is:

for(var i = 0; i < n; i++) {
  // execute whatever is here "n"times, eachtime having "i" being a different value
}

So when we do

for(var i = 0; i < data.length; i++) {
  // some command
}

We are asking to execute some command data.length times. data.length is a number that means the length of the data array. (e.g. ['a','b'].length is 2).

Since it just executes a command, we have to "create" the d ourselves each time, thus: var d = data[i]; to get each data element.

Solution 2:

A nested data structure is an array or object which refers to other arrays or objects, i.e. its values are arrays or objects. Such structures can be accessed by consecutively applying dot or bracket notation.

Here is an example:

constdata= {
    code:42,
    items: [{
        id:1,
        name:'foo'
    }, {
        id:2,
        name:'bar'
    }]
};

Let's assume we want to access the name of the second item.

Here is how we can do it step-by-step:

As we can see data is an object, hence we can access its properties using dot notation. The items property is accessed as follows:

data.items

The value is an array, to access its second element, we have to use bracket notation:

data.items[1]

This value is an object and we use dot notation again to access the name property. So we eventually get:

const item_name = data.items[1].name;

Alternatively, we could have used bracket notation for any of the properties, especially if the name contained characters that would have made it invalid for dot notation usage:

const item_name = data['items'][1]['name'];

To iterate over all elements of the data.items array, we use a for loop:

for(let i = 0, l = data.items.length; i < l; i++) {
    //`i` will take on the values`0`, `1`, `2`,..., i.e. in each iteration
    // we can access the next element in the array with `data.items[i]`, example:
    // 
    // var obj = data.items[i];
    // 
    // Since each element is an object (in our example),
    // we can now access the objects properties with `obj.id`and`obj.name`. 
    // We could also use`data.items[i].id`.
}

One could also use for...in to iterate over arrays, but there are reasons why this should be avoided: Why is 'for(var item in list)' with arrays considered bad practice in JavaScript?.