如何从响应数组 JSON 动态向 HTML 页面插入数据？

huangapple
go评论100阅读模式
英文:

how can I dynamically insert data to html page from response array json?

问题

我正在制作一个Google搜索引擎克隆，有一个结果数组。我正在运行一个for循环，将数据输入到HTML页面中，并对ID进行编号，同时递增它们。虽然这个解决方案有效，但不是最优解。我如何根据结果数量动态插入数据？我正在使用原生JavaScript。

<div class="inside">
<a id="myLink5" href="https://www.example.com">示例链接</a>
<h1 id="titleinput5"></h1>
<div>

  1. &lt;p id=&quot;mydes5&quot;&gt; &lt;/p&gt;

</div>

</div>


var input = document.getElementById("searchbartext");
var inputValue = input.value;
const url2 = 'https://api.bing.microsoft.com/v7.0/search?q=' + inputValue + '&count=50';

// totalEstimatedMatches

console.log(url2);
fetch(url2, options)
.then(response => response.json())
.then(data => {
console.log(data);
element.style.display = 'block';
var number = 1;
for (var i = 0; i < 7; i++) {
const title = data.webPages.value[i].name;
const organicUrl = data.webPages.value[i].url;
const image = data.webPages.value[i].snippet;
const totalEstimatedMatches = data.webPages.totalEstimatedMatches;
document.getElementById("number_of_results").innerHTML = totalEstimatedMatches;
document.getElementById("titleinput" + number).innerHTML = title;

  1.   //    titleinput.textContent = ;
  2.   document.getElementById(&quot;mydes&quot; + number).innerHTML = image;
  3.   document.getElementById(&quot;myLink&quot; + number).href = organicUrl;
  4.   document.getElementById(&quot;myLink&quot; + number).innerHTML = organicUrl;
  5.   number++;
  6. }

})

如何从响应数组 JSON 动态向 HTML 页面插入数据？

如何从响应数组 JSON 动态向 HTML 页面插入数据？

英文:

I am working on a Google search engine clone and have an array of results. I am running a for loop to enter the data into an HTML page, and I have numbered the IDs while incrementing them. While this solution works, it is not optimal. How can I dynamically insert data based on the number of results? I am using vanilla JavaScript.

  1. &lt;div class=&quot;inside&quot;&gt;
  2.   &lt;a id=&quot;myLink5&quot; href=&quot;https://www.example.com&quot;&gt;Example Link&lt;/a&gt;
  3.   &lt;h1 id=&quot;titleinput5&quot;&gt;&lt;/h1&gt;
  4.   &lt;div&gt;
  6.     &lt;p id=&quot;mydes5&quot;&gt; &lt;/p&gt;
  8.   &lt;/div&gt;
  10. &lt;/div&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var input = document.getElementById(&quot;searchbartext&quot;);
  2. var inputValue = input.value;
  3. const url2 = &#39;https://api.bing.microsoft.com/v7.0/search?q=&#39; + inputValue + &#39;&amp;count=50&#39;;
  5. // totalEstimatedMatches
  7. console.log(url2);
  8. fetch(url2, options)
  9.   .then(response =&gt; response.json())
  10.   .then(data =&gt; {
  11.     console.log(data);
  12.     element.style.display = &#39;block&#39;;
  13.     var number = 1;
  14.     for (var i = 0; i &lt; 7; i++) {
  15.       const title = data.webPages.value[i].name;
  16.       const organicUrl = data.webPages.value[i].url;
  17.       const image = data.webPages.value[i].snippet;
  18.       const totalEstimatedMatches = data.webPages.totalEstimatedMatches;
  19.       document.getElementById(&quot;number_of_results&quot;).innerHTML = totalEstimatedMatches;
  20.       document.getElementById(&quot;titleinput&quot; + number).innerHTML = title;
  23.       //    titleinput.textContent = ;
  24.       document.getElementById(&quot;mydes&quot; + number).innerHTML = image;
  25.       document.getElementById(&quot;myLink&quot; + number).href = organicUrl;
  26.       document.getElementById(&quot;myLink&quot; + number).innerHTML = organicUrl;
  27.       number++;
  28.     }
  29.   })

<!-- end snippet -->

如何从响应数组 JSON 动态向 HTML 页面插入数据？

如何从响应数组 JSON 动态向 HTML 页面插入数据？

答案1

得分: 1

使用document.createElement

下面我使用了示例响应数据，您可以在fetch方法中使用其中的逻辑。
还要遵循HTML结构。

  1. const container = document.getElementById('result');
  2. const count = document.getElementById('count');
  3. // API响应数据示例
  4. const webPages ={
  5.   totalEstimatedMatches:789456123,
  6.   value:[
  7.     {
  8.       id:'https://example.com',
  9.       name:'Example Website',
  10.       url:'https://google.com',
  11.       snippet:'Lorem iseuj something'
  12.     },
  13.     // 其他数据...
  14.   ]
  15. }
  17. // 在循环外部使用count
  18. count.innerText = webPages.totalEstimatedMatches;
  20. for (var i = 0; i < 7; i++) {
  21.       const title = webPages.value[i].name;
  22.       const organicUrl = webPages.value[i].url;
  23.       const des = webPages.value[i].snippet;
  24.       const totalEstimatedMatches = webPages.totalEstimatedMatches;
  25.       let div = document.createElement('div');
  26.       let a = document.createElement('a');
  27.       let h1 = document.createElement('h1');
  28.       let p = document.createElement('p');
  29.       a.href = organicUrl;
  30.       a.innerText = organicUrl;
  31.       h1.innerText = title;
  32.       p.innerText = des;
  33.       div.append(a, h1, p);
  34.       
  35.       container.append(div);
  36. }
  1. <section>
  2.   <span>Count</span><h5 id='count'></h5>
  3.   <main id='result' class='result'>
  4.   
  5.   </main>
  6. </section>

请注意，上述代码是JavaScript和HTML的混合代码，用于创建和填充HTML元素。

英文:

Use document.createElement

Below i have used sample response data, you can use the logic inside your fetch method.
Also follow the html structure

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const container = document.getElementById(&#39;result&#39;);
  2. const count = document.getElementById(&#39;count&#39;);
  3. //api response data sample
  4. const webPages ={
  5.   totalEstimatedMatches:789456123,
  6.   value:[
  7.     {
  8.       id:&#39;https://example.com&#39;,
  9.       name:&#39;Example Website&#39;,
  10.       url:&#39;https://google.com&#39;,
  11.       snippet:&#39;Lorem iseuj something&#39;
  12.     },
  13.     {
  14.       id:&#39;https://example.com&#39;,
  15.       name:&#39;Example Website&#39;,
  16.       url:&#39;https://google.com&#39;,
  17.       snippet:&#39;Lorem iseuj something&#39;
  18.     },
  19.     {
  20.       id:&#39;https://example.com&#39;,
  21.       name:&#39;Example Website&#39;,
  22.       url:&#39;https://google.com&#39;,
  23.       snippet:&#39;Lorem iseuj something&#39;
  24.     },
  25.     {
  26.       id:&#39;https://example.com&#39;,
  27.       name:&#39;Example Website&#39;,
  28.       url:&#39;https://google.com&#39;,
  29.       snippet:&#39;Lorem iseuj something&#39;
  30.     },
  31.     {
  32.       id:&#39;https://example.com&#39;,
  33.       name:&#39;Example Website&#39;,
  34.       url:&#39;https://google.com&#39;,
  35.       snippet:&#39;Lorem iseuj something&#39;
  36.     },
  37.     {
  38.       id:&#39;https://example.com&#39;,
  39.       name:&#39;Example Website&#39;,
  40.       url:&#39;https://google.com&#39;,
  41.       snippet:&#39;Lorem iseuj something&#39;
  42.     },
  43.     {
  44.       id:&#39;https://example.com&#39;,
  45.       name:&#39;Example Website&#39;,
  46.       url:&#39;https://google.com&#39;,
  47.       snippet:&#39;Lorem iseuj something&#39;
  48.     },
  49.     {
  50.       id:&#39;https://example.com&#39;,
  51.       name:&#39;Example Website&#39;,
  52.       url:&#39;https://google.com&#39;,
  53.       snippet:&#39;Lorem iseuj something&#39;
  54.     },
  55.     {
  56.       id:&#39;https://example.com&#39;,
  57.       name:&#39;Example Website&#39;,
  58.       url:&#39;https://google.com&#39;,
  59.       snippet:&#39;Lorem iseuj something&#39;
  60.     }
  61.   ]
  62. }
  64. //count use outside the loop
  66. count.innerText = webPages.totalEstimatedMatches;
  68. for (var i = 0; i &lt; 7; i++) {
  69.       const title = webPages.value[i].name;
  70.       const organicUrl = webPages.value[i].url;
  71.       const des = webPages.value[i].snippet;
  72.       const totalEstimatedMatches = webPages.totalEstimatedMatches;
  73.       let div = document.createElement(&#39;div&#39;);
  74.       let a = document.createElement(&#39;a&#39;);
  75.       let h1 = document.createElement(&#39;h1&#39;);
  76.       let p = document.createElement(&#39;p&#39;);
  77.       a.href = organicUrl;
  78.       a.innerText = organicUrl;
  79.       h1.innerText = title;
  80.       p.innerText = des
  81.       div.append(a,h1,p);
  82.       
  83.       container.append(div)
  85. }

<!-- language: lang-html -->

  1. &lt;section&gt;
  2. &lt;span&gt;Count&lt;/span&gt;&lt;h5 id=&#39;count&#39;&gt;&lt;/h5&gt;
  3. &lt;main id=&#39;result&#39; class=&#39;result&#39;&gt;
  4.   
  5. &lt;/main&gt;
  6. &lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 12:11:16
  • 转载请务必保留本文链接：https://go.coder-hub.com/76214830.html
  • bing-api
  • fetch
  • html
  • javascript
  • json
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定