gulp-file-include icon indicating copy to clipboard operation
gulp-file-include copied to clipboard

Looping over JSON arrays

Open matthewmcclatchie opened this issue 8 years ago • 3 comments

Not sure if this is do-able or I've missed something.

I'm using the @@loop command to successfully build a template based on some JSON data. The template is an SVG and the JSON is the XML structure of a bunch of SVGs.

It's working fine for the most part, except when I want to loop over an array in the JSON.

Here's an example...

JSON

[
  {
    "code": {
      "-xmlns": "http://www.w3.org/2000/svgs",
      "-title": "tick",
      "-title": "tick2",
      "-viewBox": "0 -2 20 20",
      "path": { "-d": "M15.5932057.791061L7.63569325 11.1298031l-4.3720559-3.36418924C2.37567212 7.0821181 1.1030957 7.24951664.42017918 8.1357442c-.6823373.88796523-.51609722 2.1605417.3712888 2.8434582l5.97711245 4.5985362C7.13871075 15.8627216 7.57313603 16 8.00466513 16c.60819536 0 1.20943993-.2722398 1.60911117-.7912332.00057924-.0011585 9.1924387-11.94495718 9.1924387-11.94495718.6823373-.88738602.5172557-2.15996243-.3701304-2.84287895-.8879652-.68349576-2.1599624-.51667646-2.8428789.37013032z" }
    }
  },
  {
    "code": {
      "-xmlns": "http://www.w3.org/2000/svg",
      "-title": "clock",
      "-viewBox": "0 0 64 64",
      "path": [
        { "-d": "M32 0C14.3 0 0 14.3 0 32s14.3 32 32 32 32-14.3 32-32S49.7 0 32 0zm0 57C18.2 57 7 45.8 7 32S18.2 7 32 7s25 11.2 25 25-11.2 25-25 25z" },
        { "-d": "M35.6 30.5V14.4c0-1.9-1.6-3.5-3.5-3.5s-3.5 1.6-3.5 3.5v19l13 13c.7.7 1.6 1 2.5 1s1.8-.3 2.5-1c1.4-1.4 1.4-3.6 0-4.9l-11-11z" }
      ]
    }
  }
]

Template

<!-- @@code.-title -->
<svg xmlns="@@code.-xmlns" viewBox="@@code.-viewBox" aria-labelledby="title" role="img">
	<title id="title">@@code.-title</title>
	<path d="@@code.path.-d"/>
</svg>

The first JSON property works fine with this template, but I can't figure out how to adapt it to accommodate properties where the path property is an array and not simply a string.

Is this possible? Thanks!

matthewmcclatchie avatar Feb 15 '17 11:02 matthewmcclatchie

Do you find the solution now? I have the same question with you

zhangjuanjuan01 avatar Mar 07 '18 08:03 zhangjuanjuan01

data lick this:"bread":[{"name":"财务管理"},{"name":"提现管理"}], template like this@@for (var i = 0; i < bread.length; i++) {<li>+ bread[i].name +``</li>} have a try

zhangjuanjuan01 avatar Mar 07 '18 09:03 zhangjuanjuan01

https://github.com/haoxins/gulp-file-include/issues/163#issuecomment-525890105

MuhammadMabrouk avatar Aug 10 '21 14:08 MuhammadMabrouk