如何在 json.message 对象中显示多个图像？

Question

Im building a random DogAPI image generator, where you put a number from 1-50 into a form text box, hit send, and it displays random dog photos of that amount.我正在构建一个随机 DogAPI 图像生成器，在其中将 1-50 之间的数字放入表单文本框中，点击发送，它会显示该数量的随机狗照片。

Im almost there.我快到了。 If you put '1' into the text field, it will return 1 random image!如果在文本字段中输入 '1'，它将返回 1 个随机图像！ But the issue is when you put 2 or more.但问题是当你放 2 个或更多时。 It prints to the console just fine, showing you the number you chose in the form of links to those images, but on the main page, it shows a broken image link.它可以很好地打印到控制台，以指向这些图像的链接的形式向您显示您选择的数字，但在主页上，它显示了一个损坏的图像链接。 They are all inside of an array, inside of an object... im just confused on how to show all images in object and not just 1 alone.它们都在一个数组内，在一个对象内......我只是对如何在对象中显示所有图像而不仅仅是 1 感到困惑。

HTML: HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How Many?</title>
    <link rel="shortcut icon" href="#">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <h1>How Many Dog Pics Do You Want?</h1>
        <p>Pick a number between 1-50</p>
        <form>
          <input class="number" value="3" type="text" placeholder="1-50?" required>
          <input type ="submit" value="Show me the doggies!">
        </form>
        <section class="results hidden">
          <h2>Here you go!</h2>
          <img class="results-img" alt="placeholder">
        </section>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
</body>
</html>

CSS: CSS：

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
}

.container {
  max-width: 600px;
  margin: 0 auto;
}

.hidden {
  display: none;
}

JS: JS：

'use strict';

function getDogImage(text) {
  fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
    .then(response => response.json())
    .then(responseJson => displayResults(responseJson));
}

function watchForm() {
  $('form').submit(event => {
    event.preventDefault();
    var text = $('.number').val();
    if(text < 50){
      getDogImage(text);
    }else{
      alert('Number must be between 1-50')
    };
  });
}

function displayResults(responseJson) {
  console.log(responseJson);
  //replace the existing image with the new one
  $('.results-img').replaceWith(
    `<img src="${responseJson.message}" class="results-img">`
  )
  //display the results section
  $('.results').removeClass('hidden');
}

$(function() {
  console.log('App loaded! Waiting for submit!');
  watchForm();
});

Answer 1

Here is a sample of what you're going to have to do.以下是您必须执行的操作的示例。 You can probably do this in an ES6 way but here is my working example below.你可能可以用 ES6 的方式做到这一点，但这是我下面的工作示例。 This will print out the array in your object and allow you to iterate so you can print the image urls out.这将打印出您对象中的数组并允许您进行迭代，以便您可以打印出图像 url。 You can see the working example here on my Codepen -您可以在我的 Codepen 上查看工作示例 -

https://codepen.io/CodeHero1/pen/JjoEYMv https://codepen.io/CodeHero1/pen/JjoEYMv

var messageObject = { message: [ 
'https://images.dog.ceo/breeds/rottweiler/n02106550_12828.jpg', 
'https://images.dog.ceo/breeds/sheepdog-english/n02105641_6875.jpg', 
'https://images.dog.ceo/breeds/terrier-lakeland/n02095570_4656.jpg' ], status: 
'success' };


for(var i=0; i < messageObject.message.length; i++){

    console.log(messageObject.message[i]);
}

I took this a step further in my CodePen example and have a live working example of returning the images with Jquery append.我在我的 CodePen 示例中更进一步，并有一个使用 Jquery append 返回图像的实时工作示例。 I'll also post the most important piece of this code here.我还将在此处发布此代码中最重要的部分。 I have refactored your function a little to give you a better example.我稍微重构了你的函数，给你一个更好的例子。 Please see below.请参阅下文。

function displayResults(responseJson) {
  console.log(responseJson);

  for(var i=0; i < responseJson.message.length; i++){

        console.log(responseJson.message[i]);
    $('.results').append(

      `<img src="${responseJson.message[i]}" class="results-img">`
    );
  }
    //display the results section
    $('.results').removeClass('hidden');
}

如何在 json.message 对象中显示多个图像？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-17 22:26:31

如何在 json.message 对象中显示多个图像？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-17 22:26:31

解决方案1
1 已采纳 2019-12-17 22:26:31