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
– Fred Brume, Commented Jun 13, 2018 at 1: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
– Jason Spake, Commented Jun 13, 2018 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
– Fred Brume, Commented Jun 14, 2018 at 1:42

Olha Shumeliuk · Accepted Answer · 2018-06-13 06:06:41Z

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, 2018 at 6:06

Olha Shumeliuk

7407 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fred Brume Over a year ago

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

Olha Shumeliuk Over a year ago

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.

Fred Brume Over a year ago

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

bsod_ Over a year ago

@FredBrume if the answer works for you, consider to vote and mark as an answer.

Collectives™ on Stack Overflow

data subscribed to Knockout ObservableArray but displaying empty array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related