如何将特定的JSON数据注入到HTML元素中？ [英] How to inject specific JSON data into an HTML element?

问题描述

大图：根据时间段建立一个网站来组织恐龙 - 我已经学会了如何存储JSON数据文件。这是访问和注入这些我遇到麻烦的数据。

• 我使用弹出式脚本，当点击某个列表上的项目时，弹出脚本以弹出显示数据关于选定的Dino（src： p>
  
  
  
  

  • 从这张图片你可以看到有几个字段需要从JSON数据列表中填充 - 从这里我有几个问题：
    
    

    
    

    1. 如果有100个恐龙 - 存储这些数据的最有效方法是什么？我应该为每个恐龙的特征分别有一个JSON文本文件吗？
       

    2. 如何链接每个列表项目，以便单击它们时 - 它们加载正确的数据 - 无需编写冗余代码？

       
       
       
       
       
       • 例如当name_open类被添加到被点击的HTML元素时，弹出脚本触发 - 我可以做类似的事情来注入我的JSON数据
       
       
    
    
    
    
    

    存储的JSON数据是这样的：
    
    

      [
     {
    name：T -REX，
    period：85-65百万年，
    location：美国蒙大拿州，
    发现：1902
    } 
    ] 
      

    弹出的代码如下：

     < h3 id =d-title> T-REX< / h3> 
    < img id =d-photosrc =＃/> 
    < ul> 
    < br> 
    < li>名称：< p id =name>< / p>< / li> <峰; br> 
    < li>期间：< p id =period>< / p> < /锂> 
    < br> 
    < li>位置：< p id =location>< / p>< / li> 
    < br> 
    < li>发现于：< p id =发现>< / p> < /锂> 
    < br> 
    < / ul> 
      

    
    
    

    
    
    • 我已将每个项目都标识为要注入的项目码。
    
    
    
    
    

    因此，再一次 - 我如何注入数据，以及存储大量数据？

    
    
    
    
    
    • 我明白这个问题很广泛，但我真的很感谢一些方向性的建议，例如AJAX是否完全需要注入这些数据？或者，无论如何要将多个恐龙的数据存储在一个JSON文本文件中 - 我假设必须使用REGEXPs对数据进行排序。最大的障碍是如何将每个列表项绑定到JSON数组中的特定数据点而无需编写大量的冗余代码。
    
    
    
    
    

    如果有任何用途我复制 - 将大部分页面数据粘贴到此小提琴中，但无法获得弹出式脚本在其中运作： https://jsfiddle.net/evanbananas/ssgeLpox/1/

    解决方案

    您可以使用jQuery.getJSON（）方法！
    
    

    例如：
    
    

      $。getJSON（stored / test.json，function（data）{
     $ .forEach（data，function（d，i）{
     $（'＃name'）。html（d.name）; 
     $（'＃period'）。html（d.period）; 
     $（'＃location'）。html（d.location）; 
     $（'＃discovered'）。html（d.discovered）; 
    }）; 
    } ）; 
      

    
    

    Big Picture: Building a website to organize dinosaurs based on time-period - I've learned how to store JSON data files. It is accessing and injecting this data that I am having trouble with.

    • I'm using a pop-up script that fires when an item on one of the lists is clicked that pops-up to display data about the selected Dino (src: http://dev.vast.com/jquery-popup-overlay/)

    looks like this:

    • From this image you can see there are a few fields that need to be filled from a list of JSON data - from here I have a few questions:

      1. If there are, say, 100 dinosaurs - what is the most efficient way to store this data? Should I have a separate JSON txt file for each dinosaur's traits?

      2. How can I link each list items such that when they are clicked - they load the proper data - without writing very redundant code?

         • for example the pop up script fires when the "name_open" class is added to the HTML element that is clicked - could I do something similar to inject my JSON data?

    stored JSON data is such:

    [
    {
        "name": "T-REX" ,
        "period": "85-65 million years",
        "location": "Montana, USA",
        "discovered": "1902"
    }
    ]
    

    within the pop-up the code is as follows:

    <h3 id = "d-title"> T-REX </h3>
    <img id = "d-photo" src = "#" />
    <ul>
        <br>
        <li>Name: <p id = "name"></p></li> <br>
        <li>Period: <p id = "period"></p> </li>               
        <br>
        <li>Location(s): <p id = "location"></p></li>
        <br>
        <li>Discovered in: <p id = "discovered"></p> </li> 
        <br>
    </ul>
    

    • I have ID'd every item into which I would want to inject code.

    So, once again - how can I inject my data, and what is an efficient way on storing a vast amount of data?

    • i understand that this question is broad, but I would really appreciate some directional advice such as would AJAX be completely necessary to inject this data? Or is there anyway to store multiple dinosaur's data in one JSON text file - I'd assume having to use REGEXPs to sort through the data. The biggest obstacle is how to tie each list item to a specific data point in the JSON array without writing an abundant amount of redundant code.

    if it's any use I copy-pasted most of the page data into this fiddle, however can't get the pop-up script to function within it: https://jsfiddle.net/evanbananas/ssgeLpox/1/

    解决方案

    You can use jQuery.getJSON() method!

    For ex.:

    $.getJSON( "stored/test.json", function( data ) {
      $.forEach(data, function(d, i) {
         $('#name').html(d.name);
         $('#period').html(d.period);
         $('#location').html(d.location);
         $('#discovered').html(d.discovered); 
      });
    });
    

    这篇关于如何将特定的JSON数据注入到HTML元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！