如何设置和服 api 中的 json 样式，使其看起来像带有图片的列表？答案

【问题标题】：How can I style a json from kimono api to look like a list with pictures?如何设置和服 api 中的 json 样式，使其看起来像带有图片的列表？
【发布时间】：2014-08-05 21:14:14
【问题描述】：

我想弄清楚如何从和服 api 自定义我的数据。我已经制作了 api 并且我拥有所有信息，但我不想使用他们的和服，而是使用图像设置一种动态列表的样式，而是从 api 中获取信息......

有什么办法吗？

欢迎任何帮助:)

{
  "name": "mysteries",
  "count": 10,
  "frequency": "hourly",
  "version": 8,
  "newdata": false,
  "lastrunstatus": "success",
  "lastsuccess": "Wed Aug 06 2014 04:43:51 GMT+0000 (UTC)",
  "nextrun": "Wed Aug 06 2014 05:43:51 GMT+0000 (UTC)",
  "results": {
    "collection1": [
      {
        "title": {
          "text": "Ancient king's treasure discovered in China",
          "href": "http://www.unexplained-mysteries.com/news/270384/ancient-kings-treasure-discovered-in-china"
        },
        "category": {
          "text": "Category: Ancient Mysteries",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270384"
        },
        "date": {
          "text": "Posted on 8-5-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270384"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-china-horse_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270384/ancient-kings-treasure-discovered-in-china",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Mystery big cat prowling California streets",
          "href": "http://www.unexplained-mysteries.com/news/270233/mystery-big-cat-prowling-california-streets"
        },
        "category": {
          "text": "Category: Cryptozoology",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270233"
        },
        "date": {
          "text": "Posted on 8-5-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270233"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-lioness_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270233/mystery-big-cat-prowling-california-streets",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Russia's $2.8B moon landing plans revealed",
          "href": "http://www.unexplained-mysteries.com/news/270350/russias-28b-moon-landing-plans-revealed"
        },
        "category": {
          "text": "Category: Space & Astronomy",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270350"
        },
        "date": {
          "text": "Posted on 8-5-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270350"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-moon-base-2_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270350/russias-28b-moon-landing-plans-revealed",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Strong winds reveal new Nazca geoglyphs",
          "href": "http://www.unexplained-mysteries.com/news/270335/strong-winds-reveal-new-nazca-geoglyphs"
        },
        "category": {
          "text": "Category: Ancient Mysteries",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270335"
        },
        "date": {
          "text": "Posted on 8-4-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270335"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-nazca-bird-3_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270335/strong-winds-reveal-new-nazca-geoglyphs",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Scientists invent spray-on solar cells",
          "href": "http://www.unexplained-mysteries.com/news/270330/scientists-invent-spray-on-solar-cells"
        },
        "category": {
          "text": "Category: Science & Technology",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270330"
        },
        "date": {
          "text": "Posted on 8-4-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270330"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-solar-array_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270330/scientists-invent-spray-on-solar-cells",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Boy drains entire pond to find his iPhone",
          "href": "http://www.unexplained-mysteries.com/news/270277/boy-drains-entire-pond-to-find-his-iphone"
        },
        "category": {
          "text": "Category: Bizarre",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270277"
        },
        "date": {
          "text": "Posted on 8-4-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270277"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-pond-fall_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270277/boy-drains-entire-pond-to-find-his-iphone",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Mystery of the 'Ground Zero ship' solved",
          "href": "http://www.unexplained-mysteries.com/news/270288/mystery-of-the-ground-zero-ship-solved"
        },
        "category": {
          "text": "Category: Modern Mysteries",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270288"
        },
        "date": {
          "text": "Posted on 8-3-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270288"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-ground-zero_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270288/mystery-of-the-ground-zero-ship-solved",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Giant 6ft penguins once roamed the Earth",
          "href": "http://www.unexplained-mysteries.com/news/270281/giant-6ft-penguins-once-roamed-the-earth"
        },
        "category": {
          "text": "Category: Palaeontology",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270281"
        },
        "date": {
          "text": "Posted on 8-3-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270281"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-penguins_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270281/giant-6ft-penguins-once-roamed-the-earth",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Crowds gather for annual Nexus conference",
          "href": "http://www.unexplained-mysteries.com/news/270278/crowds-gather-for-annual-nexus-conference"
        },
        "category": {
          "text": "Category: The UFO Phenomenon",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270278"
        },
        "date": {
          "text": "Posted on 8-3-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270278"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-roswell-aliens_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270278/crowds-gather-for-annual-nexus-conference",
          "alt": ""
        }
      },
      {
        "title": {
          "text": "Dinosaurs shrank for over 50 million years",
          "href": "http://www.unexplained-mysteries.com/news/270118/dinosaurs-shrank-for-over-50-million-years"
        },
        "category": {
          "text": "Category: Palaeontology",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270118"
        },
        "date": {
          "text": "Posted on 8-2-2014",
          "href": "http://www.unexplained-mysteries.com/forum/index.php?showtopic=270118"
        },
        "pic1": {
          "text": "",
          "src": "http://www.unexplained-mysteries.com/images/news_small/news-magpie_thumb.jpg",
          "href": "http://www.unexplained-mysteries.com/news/270118/dinosaurs-shrank-for-over-50-million-years",
          "alt": ""
        }
      }
    ]
  }
};

【问题讨论】：

那么，您知道如何将 json 放入您的页面，您是在问如何格式化该 json 并将其作为 html 中的列表输出？如果是这样，你的 json 是什么样的？
嗨，芭芭拉。感谢您回复我.....我正在尝试粘贴 json 代码但我无法保存它，因为它说有些字符无法保存或其他东西......
好的，这是代码，我设法把它放在了codepen上。codepen.io/shaulhadar/pen/kdero

标签： html css json api

【解决方案1】：

您可以选择如何执行此操作。我喜欢mustache.js 这种类型的东西。但是，您也可以通过构建 html 的简单循环来实现。 http://codepen.io/bhlaird/pen/yecpb。我使用 jQuery 来设置 html，但是使用直接的 javascript 也很容易（参见 cmets）。

// using mustache templating
var template = '<ul>{{#collection1}}<li><a href="{{pic1.href}}"><img src="{{pic1.src}}">{{title.text}}</a></li>{{/collection1}}</ul>';
var rendered = Mustache.render(template, json.results);
$('#usingMustache').html(rendered);
//document.getElementById('usingMustache').innerHTML =rendered;

// using a simple loop
var results = "<ul>";
for (i=0;i<json.results.collection1.length;i++) {
   results += '<li><a href="' + json.results.collection1[i].pic1.href + '"><img src="' + json.results.collection1[i].pic1.src + '">' + json.results.collection1[i].title.text + '</a></li>';
}
results += "</ul>";
$('#usingLoop').html(results);
//document.getElementById('usingLoop').innerHTML =results;

【讨论】：

嗨，芭芭拉，谢谢，太好了 :) 我会立即尝试实现它！