簡體   English   中英

通過node.js中導入的json進行交互並進行表達,然后使用玉顯示

[英]Interating through imported json in node.js and express, then displaying with jade

在查看了StackExchange上相關問題中給出的示例和答案並嘗試使用它們來解決我的問題之后,我終於發布了我的問題。 rr ...

所以我的目標是最終通過api和REST訪問一些復雜的json。 我希望導入(當前通過require,但最終通過Oauth的RESTful API)json,解析它以發現鍵/值對(包括嵌套的鍵和值),然后至少創建一個我可以顯示並顯示的對象。有權訪問所有元素。 我希望這是有道理的。 無論如何,要開始構建,我想我會得到一些示例json並要求它。 好吧,我最初從我將要使用的API中嘗試了一些json,但是我擔心它會引起問題(嗯,我對node,express和jade的經驗不足確實是原因),所以我決定簡化並掌握一些非常簡單的json。 colorsArray。 所以..現在一些代碼。 這是控制台輸出,其中包括在嘗試呈現網頁后出現的錯誤后出現的錯誤。 請忽略這些路徑,因為我使用的是面向PHP的Eclipse IDE運行nodeclipse(順便說一句,效果很好)

{ colorsArray: 
   [ { colorName: 'red', hexValue: '#f00' },
     { colorName: 'green', hexValue: '#0f0' },
     { colorName: 'blue', hexValue: '#00f' },
     { colorName: 'cyan', hexValue: '#0ff' },
     { colorName: 'magenta', hexValue: '#f0f' },
     { colorName: 'yellow', hexValue: '#ff0' },
     { colorName: 'black', hexValue: '#000' } ] }
Express server listening on port 3000

經過一些工作(下面有意見和答案的建議),我現在在瀏覽器中得到以下內容

**Express**

Welcome to Express

[object Object]

我在以下各節中更新了代碼以反映建議。

這是我當前的 app.js

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path');

//Load projects as JSON.
var ob = require('./simple.json');
console.log(ob);

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// set object for templates
app.locals('ob' , ob);

// development only
if ('development' === app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);


http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

當前的 index.js

/*
 * GET home page.
 */


exports.index = function(req, res){
  res.render('index', { title: 'Express' , ob: req.body});
  };

玉器

extends layout

block content
  h1= title
  p Welcome to #{title}
  p #{ob}



for(var prop in ob)
 p #{ob.colorName}: #{ob.hexValue}

最后是layout.jade

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

添加->最初忘記添加我嘗試導入的json文件

{
    "colorsArray":[{
            "colorName":"red",
            "hexValue":"#f00"
        },
        {
            "colorName":"green",
            "hexValue":"#0f0"
        },
        {
            "colorName":"blue",
            "hexValue":"#00f"
        },
        {
            "colorName":"cyan",
            "hexValue":"#0ff"
        },
        {
            "colorName":"magenta",
            "hexValue":"#f0f"
        },
        {
            "colorName":"yellow",
            "hexValue":"#ff0"
        },
        {
            "colorName":"black",
            "hexValue":"#000"
        }
    ]
}

所以你有它。 同樣,我希望能夠獲取json,將其解析以標識元素(包括嵌套的子元素),並將其作為我可以訪問的對象進行邏輯和顯示。 但是現在,我可以將其顯示在翡翠中並通過循環訪問對象的元素而感到頭暈。

感謝您抽出寶貴的時間來仔細研究這個問題,我知道在其他示例中已經回答了這個問題,但是我花了一個星期的時間來嘗試采用那些解決方案,但是沒有運氣

當node.js需要一個json文件時,它會自動對其進行解析 您正在嘗試在這里第二次解析它:

exports.index = function(req, res){
  var ob = JSON.parse(ob);
  res.render('index', { title: 'Express' , ob: ob});
};

嘗試省略JSON.parse並將對象直接傳遞給render方法。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM