こんにちは。櫻井です。
今日はJSの配列の扱いについてお話ししたいと思います。
連想配列を扱えるようになると開発時にかなり時短になるんです。

See the Pen arrayDemo by knap_develp (@knap_develp) on CodePen.

例えばこんな感じで使います。
何をやっているのか説明すると。
まずdataItemに流し込むデータが入っています。
次にある変数allProduct、vegetableProduct、fruitProductにはそれぞれあとでJSで生成するhtmlを入れます。これらの変数はただ定義しただけだとあとで「+=」で足して行くときに「undefined」になってしまうのであえて「’’」にしておきます。

次はfor文です。for文を使ってdataItem内のデータを正確に特定していきます。for in文とか使えばもっと簡単にできるんでしょうがまずは基本のfor文です。JSを普段あまり触らない人からするとfor文を書くのは気が引けるかもしれません。
for文はまずカッコの中に何回周すのかを定義します。
for文の()の中を翻訳すると「iがdataItem.lengthより小さい間は{}の中の処理をして終わったらiに1を足すっていうのを繰り返してね。iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」って感じのことが書かれてます。
「let i =0」というのが始まりの数です。今回はiにしてますが定義する名前はなんでも構いません。翻訳した文章の主語になっているiはここで定義しています。
次の「i < dataItem.length」はdataItem.lengthが流し込むデータの数を表しています。「iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」っていういつまでやり続けるのか決めているのがこの部分です。
最後の「i++」は「終わったらiに1を足す」の部分です。{}の中が終わったらどうするのか決めているのがこの部分です。

ではfor文の中をみていきましょう。
はじめに定義したallProductの中にhtmlの構造を足しています。これはES6の書き方(IE11では使えないです。)なんですが足す内容を“で囲むと${}の中だけ変数が展開されるんです。今回は楽がしたいので楽なこの方法を選んでます。
例えば${dataItem[i].name}ですがこれはdataItemのi番目のnameの値を呼び出してます。
${dataItem.name}ではダメなんです。JSはdataItemの[]の中の{}を一つの塊として扱ってくれます。中のデータを参照するには[]の中の南蛮めのデータなのかを明記しなければいけなません。例えば、dataItemの[]の中の五番目のデータが欲しかったらJSは数字の始まりが1ではなく0からなのでdataItem[4]とすれば中のデータがもらえます。iにはfor文で周回させている数字が入ります。なのでdataItemの中の全部のデータを参照してくれるんです。
allProductのhtmlを入れる処理の後にはif文が現れました。
これは何をやっているのかというと「もしdataItemのi番目のcategoryが野菜だったら{}の処理をしてね。」っていう処理をしてます。中で行っている処理はallProductの時の処理同じでvegetableProductの中にhtmlの構造を足して行く処理です。
次に出てくるif文もやっていることは同じです。

説明は以上になりますがいかがでしょうか？出来そうな感じがしてくれてたらいいのですが。。
これと同じことをJSONを使ってできるとすごく便利になります。
実際、J.フロント建装様のときにはさらにこれに加えて検索機能をつけたりしました。
僕自身まだまだ完璧に使いこなせている気はしませんが割と開発に役立てることが出来ています。是非扱えるように練習してみてください。