jsonオブジェクトからイメージをページに挿入する方法は？

Question

私はニュースサイトを作成しており、すべてのニュースはjsonファイルに保存されています。 jsonスキーマの例を次に示します。

{ 
title: "lorem ipsum", 
body: "Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu [image1 goes here]. Nditiis Mollitia Facere Adipisci Fugiat Minus Vero Nostrum Sint Se. I Et Culpa Vitae Quos Ullam Optio Est Debitis Reprehenderit Alia. Dolorem Necessitatibus Accusantium Voluptatibus Maiores Dolores Quae Velit Te. Tur Non Officia Assumenda Obcaecati Veritatis Minima Dicta Im [image 2 goes here]", 
author: "author", 
images: ["path/to/image1","path/to/image2] 
} 

イメージを正しい位置に表示させるにはどうすればよいですか？
（回答に役立つなら、nunjucksテンプレートエンジンを使用しています）

Answer 1

できるだけjsonスキーマを変更する必要があります。

{ 
    "title": "Lorem Ipsum", 
    "bodies": [ 
    { 
     "text": "Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu", 
     "image": "path/to/image1" 
    }, 
    { 
     "text": "Blah blah blah", 
     "image": "path/to/image2" 
    } 
    ], 
    "author": "author" 
} 

次に、イメージが常にテキストの後にあることがわかります。イメージで始まる空のテキストを追加することもできます。

編集：ちょっとおもしろいことに、私は、ニュースのテキストと後に続くイメージを含む配列を作成する短いスクリプトをまとめました。私はまだあなたのスキーマを更新するべきだと思います。

var myNew = {...} 
var magic = myNew.body.split(/\[.*?\]/).filter(n=>n); 
var whatsthis = magic.reduce((fullArray,text, index)=>{ 
    fullArray.push(text); 
    fullArray.push(test.images[index]); 
    return fullArray; 
}, []); 

console.log(whatsthis); 

出力は["Qui Quo Omnis Nulla Porro Quidem Quisquam Consequuntur Neque Expedita Iu ", "path/to/image1", ". Nditiis Mollitia Facere Adipisci Fugiat Minus Ve…ia Assumenda Obcaecati Veritatis Minima Dicta Im ", "path/to/image2"]です。

https://jsfiddle.net/Lfpab33y/

それは物事が容易になります場合は、あなたがそれをテキストまたはIMAGEPATHだか知っているし、あなたのテンプレートで、それについて何かを

fullArray.push({type:"text", content:text}); 
fullArray.push({type:"imagePath", content:test.images[index]}); 

に

fullArray.push(text); 
fullArray.push(test.images[index]); 

を変更することができます。