data subscribed to Knockout ObservableArray but displaying empty array

Question

I'm new to javascript. i'm having difficulty printing the data from the location ObservableArray. The data - bind works and i could list out the data from the location ObservableArray at the view but can't print it out on the console. i have been on it for hours now, any help would be appreciated. thank you

Here is the ViewModel

    let MapViewModel = function() {

let map
let geocoder;
let self = this;

self.location = ko.observableArray([]);

for (let i = 0; i < locationList.length; ++i) {
  self.location.push(new Location(locationList[i]));
}

console.log(this.location()); // Location, Location, Location, Location, Location, Location, Location]
console.log(this.location()[0].name); //  Location {name: ƒ, address: ƒ} ...
console.log(this.location().length); //length is 7

}

let Location = function(data) {
this.name = ko.observable(data.name);
this.address = ko.observable(data.address);


}

  ko.applyBindings(new MapViewModel());

Here is the Binding Code`

  <div class="menu_item_container">
    <h1>Neighborhood Map</h1>
    <input type="text" id="search" data-bind= 'value:filterLocations, valueUpdate: 'afterKeyDown',value:filterLocations' placeholder="Search Locations...">
    <hr>
    <nav id=nav>
      <ul data-bind='foreach:location'>
        <li data-bind="text:name"></li>
      </ul>
    </nav>
  </div>

LocationList

  let locationList = [{
  name: 'Brooklyn Museum',
  address: '200 Eastern Pkwy, Brooklyn, NY 11238'
}, {
  name: 'Empire State Building',
  address: '350 5th Ave, New York, NY 10118'
}, {
  name: 'Statue of liberty',
  address: 'New York, NY 10004'
}, {
  name: 'Rockefeller Center',
  address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
  name: 'Brooklyn Bridge',
  address: 'Brooklyn Bridge, New York, NY 10038'
},
{
  name: 'Time Square',
  address: '45 Rockefeller Plaza, New York, NY 10111'
},
{
  name: 'World Trade Center',
  address: '285 Fulton St, New York, NY 10007'
},
  ];

it is an array of objects having name and address as its attributes. thank you — Fred Brume, Jun 13 '18 at 01:16
When you say you can't print it on the console what does that mean? Does it give you an error? Is it formatted improperly? — Jason Spake, Jun 13 '18 at 15:52
No, it doesn't display any error. it displays this instead "Location {name: ƒ, address: ƒ}" when I try to print out the first object in the ObservableArray using this line of code "console.log(self.location()[0]);". I don't have any idea what it means, I need something like this "Location {name: "New york", address: "E98St"}. thank you — Fred Brume, Jun 14 '18 at 01:42

score 1 · Accepted Answer · answered Jun 13 '18 at 06:06

1

This can unwrap observable to regular js and convert this to single string (if needed) and then u can print it console :

let locationsJSON = ko.toJS(self.location);
let locationsString = JSON.stringify(locationsJSON);

answered Jun 13 '18 at 06:06

Olha Shumeliuk

720
7
14

just tried it, it worked.Thanks a million. Pls can you point out the mistake I made in my code so I will know how to tackle similar problems in the future. thanks – Fred Brume Jun 14 '18 at 01:45
1

no mistakes. When you doing `this.name = ko.observable(data.name);` it's wrap data.name into function (observable) to add additional functionality to it (e.g. subscriber-listener). And when you log `console.log(this.location()[0].name);` it says that name is function, coz it actually is a function (ko observable). To unwrap single observable you can use brackets after observable var name like `console.log(this.location()[0].name());`. If there're nested ones you need to use `ko.toJS` or `ko.mapping.toJS` which will convert all your observables into regular json. – Olha Shumeliuk Jun 14 '18 at 05:38
Oh my God!! Thanks once again, didn't even occur to me at all. You just saved me a lot of stress. Thanks so much – Fred Brume Jun 14 '18 at 10:02
@FredBrume if the answer works for you, consider to vote and mark as an answer. – bsod_ Aug 21 '18 at 14:15

data subscribed to Knockout ObservableArray but displaying empty array

1 Answers1