1

I'm very new but I've completed some courses on freecodecamp. Say that I make an object about cars. I want the webpage user to be able to write "Ford Mustang" and after this all the information stored in the object fordMustang pops up for the user to read.

I've tried some different tactics but cant get it to work. Here is the code I have written,

        <label for="navn">
            <input type="text" id="field" class="field" name="navn">
            <input type="submit" value="send" id="send" class="send">
        </label> <p id="par"> </p>

let fordMustang = {
producer: "Ford",
type: "Mustang",
engine: "v8",
horsePower: 300 }
const inputField = document.querySelector(".field");
const press = document.querySelector("#send");
const para = document.querySelector("#par");

function objScan() {
    const word = String(inputField.value);
    if (word == "Ford Mustang") {
        para.textContent = fordMustang;
    }
    else {
        para.textContent = "Not recognized"
    }
}
press.addEventListener("click", objScan);

2 Answers 2

1

You can use JSON.stringify() to achieve this. You need to replace para.textContent = fordMustang; with JSON.stringify(fordMustang);

let fordMustang = {
producer: "Ford",
type: "Mustang",
engine: "v8",
horsePower: 300 }
const inputField = document.querySelector(".field");
const press = document.querySelector("#send");
const para = document.querySelector("#par");

function objScan() {
    const word = String(inputField.value);
    if (word == "Ford Mustang") {
        para.textContent = JSON.stringify(fordMustang);
    }
    else {
        para.textContent = "Not recognized"
    }
}
press.addEventListener("click", objScan);
<label for="navn">
            <input type="text" id="field" value="Ford Mustang" class="field" name="navn">
            <input type="submit" value="send" id="send" class="send">
        </label> <p id="par"> </p>

0

You are almost there. You just need to change your const para identifier from id to class. And add some meaningful line breaks or any style you wish to show it inside the tag using innerHTML

let fordMustang = {
  producer: "Ford",
  type: "Mustang",
  engine: "v8",
  horsePower: 300
}
const inputField = document.querySelector(".field");
const para = document.querySelector(".par");

function objScan() {
  const word = String(inputField.value);
  if (word == "Ford Mustang") {
    let result = ""
    Object.entries(fordMustang).map(entries => result += entries[0] + ": " + entries[1] + "<br>")
    para.innerHTML = result
  } else {
    para.textContent = "Not recognized"
  }
}
<label for="navn">
            <input type="text" id="field" class="field" name="navn" value="Ford Mustang">
            <input type="submit" value="send" id="send" class="send" onclick="objScan()">
        </label>
<p id="par" class="par"> </p>

2
  • This one worked, Deepak, and the one above yours. But, say there are 100s of objects the user can search for. If I follow the code you wrote, it would take alot of time to enter all those objects into functions in that way. Is there an easier way to do this, without having to write "Producer: " + fordMustang.producer? Can a for loop iterate through the object contents in any way for me not having to write the object in the search function?
    – roberten
    Dec 17, 2021 at 20:13
  • Hi @roberten. You need to concat it that way as in my code to add styles to it. But as you asked, if you have to show a huge number of key value stuff, there is a very easy way by making use of Object.entries. I have updated the answer.
    – Deepak
    Dec 17, 2021 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.