Filtering JSON Data with AMP [AMP-STATE] [AMP-BIND] [AMP-MUSTACHE]

I'm working on building an inventory list within the AMP structure, as the rest of our site is built with AMP, and need to be able to filter some of my data for usability purposes. Here's a link to what I'm currently working on: Inventory List.

I have been using the Product Browse Page example on the AMP by Example website as my guideline for how to go about this (Product Browse Page). I can't however seem to get my data to filter at all. I would expect that when I choose 'Wheel Loader' from my select menu that the item in my inventory list would disappear.

Here is my initial code chunk that sets up the 'Machine Type' select menu, I also have two more layers to this filtering that I currently have commented out as I try to get this one working.

     <amp-state id="inventory">
                <script type="application/json">
                    {
                        "Type": "all",
                        "listSrc": "https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM"
                    }
                </script>                
            </amp-state>
            <amp-list height="60" layout="fixed-height" src="https://www.craigattachments.com/json/inv-dropdowns.json">
                <template type="amp-mustache">
                    <label for="Type">Machine Type</label>
                    <select id="Type" name="Type" class="inv-dropdown" on="change:AMP.setState({inventory: {Type: event.value,listSrc: 'https://www.craigattachments.com/json/inventory.json?Type='+ event.value +'&_=RANDOM'}})">
                         <option value="all">Select your machine type</option>
                        {{#type}}
                        <option value="{{name}}">{{name}}</option>
                        {{/type}}
                    </select>
                </template>
            </amp-list>

I am then trying to use the above code to filter my list (below) which is populated using my inventory.json file. I have shortened the file for testing purposes, but it will eventually be populated by going through our ERP systems API.

    <amp-list width="auto" height="150" layout="fixed-height" src="https://www.craigattachments.com/json/inventory.json?Type=all&_=RANDOM'" [src]="inventory.listSrc">  
                <template type="amp-mustache">
                    <div class="inv-list-row">
                        <div class="inv-list-item inventory">{{SerialNo_SerialNumber}}</div>
                        <div class="inv-list-item inventory">{{Part_PartNum}}</div>
                        <div class="inv-list-item inventory">{{Part_PartDescription}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialBrand}}</div>
                        <div class="inv-list-item inventory">{{Part_CommercialSubBrand}}</div>
                        <div class="inv-list-item inventory">{{Type}}</div>
                    </div> 
                </template> 
            </amp-list>

Any insight on what I may be missing so that this will actually filter my data on change of the select menu? I'm assuming it is a referencing issue to the 'Type' item in my JSON data, but am not sure how to go about making that connection.

Edit: May 16th, 2018

Finally got it working. Decided to drop 'Model' for now but will add functionality for it later.

GitHub Link to Code

Solution

It looks like the filtering would need to happen on the server/API end based on the provided Type parameter. The fetch calls are happening on the Inventory List link when the type is changed and it is setting the Type correctly in the URL, but it was returning the same JSON for both types when I tested it. The AMP bit of it looks right to me.