Используя мопса каждый цикл через массив объектов

Итак, я использую NodeJs (с мопсом в качестве механизма просмотра). Я намерен создать таблицу, в которой каждый цикл в моем коде мопса добавляет данные из файла data.json в строки таблицы.

Сначала позвольте мне показать вам мой код NodeJs; У меня есть следующее в файле app.js (который является моей основной точкой входа в мою программу)

var express = require('express');
var pple = require('data.json');
var app = express();

app.set('view engine', 'pug');


// Get the homepage
router.get('/', (req, res, next)=>{
    res.render('index', {pple:pple});
});

app.listen(4000, ()=>{
    console.info('Listening to port 4000');
});

Во-вторых, в моем файле index.pug есть следующий код мопса:

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone

и это дает мне следующий результат: Таблица, которую я получаю, когда ввожу код выше

Однако вот как выглядит мой файл data.json:

[
    {
        "name": "Person1",
        "position": "Software Eng",
        "address": "Nairobi",
        "phone": "0712121212",
        "foods": {
            "likes": ["fish", "chips"],
            "dislikes": ["pork"]
        }
    },
    {
        "name": "Person2",
        "position": "Web Dev",
        "address": "Mombasa",
        "phone": "0711223344",
        "foods": {
            "likes": ["checken", "eggs"],
            "dislikes": ["bread"]
        }
    },
    {
        "name": "Person3",
        "position": "Marketer",
        "address": "Nakuru",
        "phone": "0711121314",
        "foods": {
            "likes": ["peas", "beans"],
            "dislikes": ["weed"]
        }
    }
]

и я хотел бы добавить дополнительные столбцы с указанием продуктов, которые им нравятся и не нравятся. Как видите, продукты, которые им нравятся, разделены на две части, поэтому я хотел бы, чтобы отображалось рыба и чипсы для человека 1, курица и яйца для человека 2 и горох и фасоль для человека 3; все это в столбце Нравится.

Пожалуйста, помогите мне узнать, как добавить все это в столбец "Нравится" и "Не нравится". Спасибо.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
8
0
11 745
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я предпочитаю использовать сеточная система начальной загрузки, но вы можете попробовать добавить столбец food, а под этим столбцом добавить еще два столбца.

Что-то вроде этого:

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone
        th Food
           tr
             th Likes
             th Dislikes

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone
          td 
            tr
              td= n.foods.likes
              td= n.foods.dislikes

Извините, я нажал кнопку и закрыл Интернет. Я отредактировал пост. Я думаю, это должно сработать.

Sergi Nadal 31.08.2018 08:42
Ответ принят как подходящий

Pug оценивает встроенный JavaScript, поэтому вы можете добавить код JavaScript для форматирования foods.likes и foods.dislikes. См. https://pugjs.org/language/code.html

Следующее должно помочь, просто используя Array.prototype.join () для объединения понравившихся и не понравившихся блюд.

doctype html

html(lang='en')
  body
    table.table.table-striped
      tr
        th Name
        th Position
        th Address
        th Phone
        th Liked Foods
        th Disliked Foods

      each n in pple
        tr
          td= n.name
          td= n.position
          td= n.address
          td= n.phone
          td= n.food.likes.join(" and ")
          td= n.food.dislikes.join(" and ")

Другие вопросы по теме