2017-03-10 30 views
0

ここで何が起こっているのか、なぜJSONキー名にピリオドを使用するのか不明です。JSONレスポンスでキー名からピリオドを削除する

私がしようとしていることの概要は、ejs変数を使ってjson応答をページテンプレートに渡し、個々のフィールドでそのデータを取得することです。

JSONレスポンスは次のようになります。

JSON tree

それはprismic.ioからです。 (オブジェクトの括弧はそこで切り取られ、データはメインオブジェクトの子です)。

私はEJS

<%= product.data.product.imgone2.value.main.url %> 

を通じて注入したとき、私はのようなエラーが出ます:

なぜこれを行うプリズミックなり、
Cannot read property 'imgone2' of undefined 

EJSでインラインで修正する方法はありますか?

もしそうでなければ、JSONレスポンスをjavascript関数で解析してそれを削除するにはどうすればよいですか?あなたは私のルートを必要とする場合には

router.get('/product/:slug', function(req, res) { 
//route params 
    var slug = req.params.slug; 
    var productResp; //scope up api response to pass to render() 
    console.log(slug); 
//api call 
    Prismic.api("https://prismic.io/api").then(function(api) { 
    return api.getByUID('product' , slug); 
    }).then(function(response) { 

    res.render('product-template', { 
     product: response, 
    }) 

    }, function(err) { 
    console.log("Something went wrong: ", err); 
    }); 
}); 

ありがとう!

+4

あなたは 'product.data [" product.imgone2 "]。value.main.url'を試してみましたか? – Hamms

+1

ブラケット記法FTW! – epascarello

答えて

2

あなたはproduct.data ["product.imgone2"]を試しましたか?value.main.url? object.property

プロパティが有効なJavaScript識別子でなければなりませんようにプロパティにアクセスするには、公式ドキュメント

から

、「_(アンダースコアも含めて、英数字の順序、すなわち")とドル記号(" $ ")で始まり、数字で始めることはできません。たとえば、object。$ 1は有効ですが、object.1は有効ではありません。

プロパティが有効なJavaScript識別子ではない場合は、ブラケット表記を使用する必要があります。

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Property_Accessors

0

それはすでに述べたように、ブラケット表記を使用します。

product.data["product.imgone2"].value.main.url 

これは、何らかの理由でできない場合は、あなたが「解決」するために、次の機能を通して、あなたのオブジェクトを実行することができ構造:

//this will transform structures like these: 
 
var a = { 
 
    "data": { 
 
    "product.imgone2": { 
 
     "value": { 
 
     "main.url": "yourMainUrl" 
 
     }, 
 
     "another.value": "to show how this is handled" 
 
    } 
 
    } 
 
} 
 

 
//into these: 
 
var b = nestKeysWithDots(a); 
 
console.log(JSON.stringify(b, null, 2)); 
 

 
//wich now can be resolved by your paths, without worrying 
 
console.log(
 
    "b.data.product.imgone2.value.main.url", 
 
    b.data.product.imgone2.value.main.url 
 
); 
 

 

 
//and the implementation: 
 
function isObject(value){ 
 
    return typeof value === "object" && value !== null; 
 
} 
 

 
function nestKeysWithDots(source){ 
 
    return !isObject(source)? source: 
 
    Array.isArray(source)? source.map(nestKeysWithDots): 
 
    Object.keys(source).reduce((target, path) => { 
 
     var value = nestKeysWithDots(source[path]); 
 
     path.split(".").reduce((obj, key, index, array) => { 
 
     if(index+1 === array.length){ 
 
      //last key 
 
      obj[key] = value; 
 
      return; 
 
     } 
 
     return key in obj && isObject(obj[key])? 
 
      obj[key]: 
 
      (obj[key] = {}); 
 
     }, target); 
 
     return target; 
 
    }, {}); 
 
}

関連する問題