CODEWITHSUNDEEP
javascriptjqueryhtmljsonobject
JacobAshley
JacobAshley

Reputation: 83

How to show more than one image in json.message object?

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.

Im almost there. If you put '1' into the text field, it will return 1 random image! But the issue is when you put 2 or more. 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.

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:

* {
  box-sizing: border-box;
}

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

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

.hidden {
  display: none;
}

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();
});

Upvotes: 2

Views: 176

Answers (1)

Joe Z
Joe Z

Reputation: 349

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. This will print out the array in your object and allow you to iterate so you can print the image urls out. You can see the working example here on my Codepen -

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. 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');
}

Upvotes: 1

Related Questions