Wired Apex for LWC

Question

I am hoping a better JS developer can explain to me why one of these methods fails and the other works. I have some wired Apex to get data into an LWC. If I used a tracked property and 'this.property = data'. I would get an undefined error.

But if I call the info directly from the wired property everything works. The Salesforce documentation seems to be telling me to give the data to a trackable property. Wired Apex Documentation

Where is my JS that throws an undefined error going wrong?

Here is my JS that works

import {LightningElement, wire, track} from 'lwc';
import getBenchmarkValues from '@salesforce/apex/BenchmarksSelector.getOverAllBenchmarks';

export default class OverAllBenchmarks2 extends LightningElement {


  @wire(getBenchmarkValues)benchmarks;
}

HTML That works

<template>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks.data}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p key={benchmark.id}>Hello This is a test</p>
        </template>
    </lightning-card>
</template>

JS that fails

import {LightningElement, wire, track} from 'lwc';
import getBenchmarkValues from '@salesforce/apex/BenchmarksSelector.getOverAllBenchmarks';

export default class OverAllBenchmarks extends LightningElement {
    @track benchmarks;

    @wire(getBenchmarkValues)wiredBenchmark({data, error}){
        if(data){this.benchmarks = data}
        console.log(data);
        console.log(this.benchmarks);
    }
}

HTML That Fails

<template>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks.data}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p>Hello</p>
        </template>
    </lightning-card>
</template>

Answer 1

The problem in the second JS, HTML is you have defined benchmarks as

if(data){this.benchmarks = data}

So you should be accessing it in HTML like

<template>
    <template if:true={benchmarks}>
    <lightning-card title="Overall Benchmark Values">
        <template for:each={benchmarks}  for:item='benchmark'>
            <p key={benchmark.id}>Program Delivery Rate <span>{benchmark.Program_Mean_Delivery_Rate__c}%</span></p>
            <p>Hello</p>
        </template>
    </lightning-card>
    </template>
</template>

rather than {benchmarks.data}, because there is nothing like data in benchmarks.