ng-show does not produce the expected result after the angular replacement

advertisements

Forgive me if something similar has already been asked. I am making a web app using Angular JS 1.5.

In my controller shown below, I have requested an array of JSON objects and stored them in $scope.gameList. For context I have a JSON file containing a list of games on the steam store stored as an array of objects. I am then using this code to read through and if a name matches then add it to an array called cleanedGameNames which is then stored in $scope.cleanedGameNames. Data is an array of JSON objects containing a list of search results from the IGDB API.

if(data[i]["name"].replace(": ", " - ") === $scope.gameList[j]["name"]){

            console.log("replaces colon trailing space with dash");
            cleanedGameNames[i] = $scope.gameList[j]["name"];
            console.log(cleanedGameNames[i]);
}

In my HTML I am looping through both $scope.gameList (an array containing all games on steam) and $scope.games(an array containing a list of search results from the IGDB API).

<ul ng-repeat="steam in gameList | filter:game.name:true " ng-show="$first">
    <div ng-repeat="gameName in cleanedGameNames track by $index">
        <li>
            <div ng-show="gameName == steam.name">
                <p ng-bind="steam.name">{{steam.name}}</p>
                <a ng-href="http://store.steampowered.com/app/{{steam.appid}}">Buy on steam</a>
            </div>
        </li>
    </div>
</ul>

What I am expecting it to show in a cell of my table is

Warlock - Master of the Arcane (this was originally Warlock: Master of the Arcane but I did a replace on this string and stored the result of the replace function in an element of my cleanedGameNames array.
Buy on Steam //This would be a link to buy the game on the steam store

Instead, when I try and display this string in my table I get nothing. This is all being shown in a HTML table. In my angular.js file I have done sone console.log statements and it seems that the Warlock - Master of the Arcane is being sent into $scope.cleanedGameNames(the array which I am looping over in my HTML code) as expected.

Is there something that I am missing?


  1. try to see gameList in html: add {{gameList}} if you see it then
  2. delete | filter:game.name:true

it is redundant {{steam.name}}

delete {{steam.name}}