CODEWITHSUNDEEP
jsongulppug
Jason Lydon
Jason Lydon

Reputation: 7180

How to parse the external json in gulp-jade?

I'm using jade templates for my templating system, passing a json file in as the jade locals via my gulpfile.js, but I can't seem to deep dive into the json. I feel like I'm overlooking something basic, but can't find an example online anywhere.

gulpfile.js:
Passes the json file into jade

gulp.task('html', function() {
    gulp.src('./markup/*.jade')
        .pipe(jade({
            pretty: true,
            locals: JSON.parse( fs.readFileSync('./markup/data/website_data.json', { encoding: 'utf8' }) )
        }).on('error', gutil.log))
        .pipe(gulp.dest('../'))
});

Then in my jade, I just pass the locals into a variable for the sake of readability.

- var employees = locals

And I can loop through json that is one level deep:

jade:

for employee in employees
  if employee.Tier === 'Founder'
    li 
        button(data-bio="#{employee.LastName.toLowerCase()}") 
            img(src="/public/img/employees/#{employee.FirstName.toLowerCase()}-#{employee.LastName.toLowerCase()}.jpg", alt="#{employee.FirstName} #{employee.LastName} | #{employee.Title}")
            strong #{employee.FirstName} #{employee.LastName}
            | #{employee.Title}

json:

[
  {
    "FirstName":"John",
    "LastName":"Doe",
    "Title":"Strategist",
    "Tier":"Founder",
    "Description":"",
    "Email":"",
    "Links":""
  },
...
]

But that has only worked for me if the items I loop through are in the root, as soon as I make the json one level deeper, I can't get it to work based on the key. I want to make the json deeper so I can different sections of a site in it instead of just the employees.

[{
    "employees": [
        {
            "FirstName":"Jason",
            "LastName":"Bellinger",
            "Title":"Lorem Ipsum",
            "Tier":"",
            "Description":"",
            "Email":"",
            "Links":""
        },
        ...
    ]
}]

I tried a few different approaches to to dig into the json and have failed thus far.

ATTEMPT 1: adjust the variable call and keep the same loop

- var employees = locals.employees

And I get 'Cannot read property 'length' of undefined' in the terminal running $gulp watch

Also try:

- var employees = locals['employees']

to the same result.

ATTEMPT 2: don't use the var and call locals directly in my loop

for employee in locals.employees

AND

for employee in locals["employees"]

And I end up with the same error.

ATTEMPT 3:

keep the var and adjust the loop

  - var employees = locals
  ...
  for employee in employees
    li #{employee.LastName}

Then I don't get an error in Terminal, but I don't get any content. It produces one empty li.

So then, I try to go a layer deeper in the loop with:

for employee in employees[0]
        li #{employee.LastName}

AND

for employee in employees['employees']
        li #{employee.LastName}

AND I still get no error and one empty li

I've parsed enough json in my day and jade seems simple enough, I have to be overlooking something basic. Someone please humble me.

I also dabbled in gulp-data, but I'm getting the data into jade with my approach, so I think it's my approach in jade...

Upvotes: 0

Views: 955

Answers (2)

Troy Larssen
Troy Larssen

Reputation: 36

You need to access the array inside you locals variable. The length of local = 1 and that is the entire array of employees.
You'll need to set employees = to the array inside of the locals variable with:
"- var employees = locals[0].employees"

Upvotes: 2

Jason Lydon
Jason Lydon

Reputation: 7180

I knew it was something basic. I reverted everything back to the original setup and changed the var and this is working.

- var employees = locals[0]['employees']

Truth be told, I thought I already tried this, but went back and tried again...

Upvotes: 0

Related Questions