javascript - 一张一张显示数据 JavaScript

Question

你好我创建了一个打印从 jsonp 文件中获取的数据的函数，但我希望这些数据一个一个地显示，我的意思是供应商名称，然后是这个供应商的policyUrl

1. 这是源代码的链接：https ://github.com/neqts/jsonpPrint
2. 以及我创建的结果https://neqts.github.io/jsonpPrint/

帮助...

"use strict"

console.log(json)
const getNames = (obj) => Object.values(obj).map(el => el.name)

const purposesNames = getNames(json.purposes)
const vendorsNames = getNames(json.vendors)
const specialFeaturesNames = getNames(json.specialFeatures)
const specialPurposesNames = getNames(json.specialPurposes)
const stacksNames = getNames(json.stacks)




let outputArr = []
window.onload = function main() {

  const add = document.createElement('div')
  add.setAttribute("id", "demo");
  const overall = document.createElement('div')
  Object.entries(json.vendors).forEach(vendor => {
    outputArr.push(vendor[1].policyUrl) 
  })







  const add2 = document.createElement('div')
  document.body.appendChild(add2)
  const h1 = document.createElement('h1')
  add2.appendChild(h1)

  h1.innerHTML="GDPR consent"
  h1.style.cssText=`
  display:flex;
  justify-content:center;
  `
  
  const p2 = document.createElement('p')
  add2.appendChild(p2)
  p2.innerHTML=vendorsNames
  add2.classList.add('names')
 
 


  overall.appendChild(add);
  document.body.style.overflow="hidden"
   document.body.style.backdropFilter="blur(7px)";
   document.body.style.margin="0px"
   document.body.style.padding="21px"
  document.body.style.justifyContent="center"
  document.body.appendChild(add);
  document.body.style.background = "url(https://www.hgsm.pl/wp-content/uploads/2017/03/Pattern-Blue-Dots-background-patterns-pattern-wallpapers-1920x1080.jpg)"
  var final = document.getElementById("demo");
  final.innerHTML = outputArr;



      
  const add3 = document.createElement('div')
  add3.classList.add('butons')
  document.body.appendChild(add3)
  const accept = document.createElement('button')
  add3.appendChild(accept)
  accept.classList.add('btn1')
  const reject = document.createElement('button')
  add3.appendChild(reject)
  reject.classList.add('btn2')
  accept.innerHTML="ACCEPT"
  reject.innerHTML="REJECT"

  accept.addEventListener("click",show)
  reject.addEventListener("click",hide)
   document.querySelector('.butons')


  function show() {
   add2.style.display="none"
   add3.style.display="none;"
   final.style.display="none"
   document.querySelector('.butons').style.display="none"
   document.body.style.backdropFilter="none"


    
  }
  
  function hide() {
    add2.style.display="none"
    add3.style.display="none;"
    final.style.display="none"
    document.querySelector('.butons').style.display="none"
    document.body.style.width="100%"
    document.body.style.height="130vh"
 
     
   }

  
 


  
  
  overall.style.cssText = `
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(7px);
    `;
  add.style.cssText = `
      display: flex;
      justify-content: center;
      align-items: center;
      width:90%;
      height: 90%;
      background: white;
      margin: 0 auto;
      font-size:7px;
    `;


    
  add2.style.cssText = `
  display: grid;
  justify-content: center;
  align-items: center;
  width:90%;
  height: 90%;
  background: white;
  margin: 0 auto;
  font-size:7px;
`;
add3.style.cssText = `
display: flex;
padding-top:20px;
padding-bottom:20px;
justify-content: center;
align-items: center;
width:90%;
height: 90%;
background: white;
margin: 0 auto;
font-size:7px;
`;
}

标签： javascriptjson

Answer 1

我想这就是你要找的

  const add2 = document.createElement('div')
  Object.values(json.vendors).forEach(vendor => {
    const p = document.createElement('p');
    p.innerHTML = `${vendor.name}, <a href="${vendor.policyUrl}" >${vendor.policyUrl}</a>`;
    add2.appendChild(p);
  });
 document.body.appendChild(add2)

它会像这样渲染