Save values of JS object as Markup

Question

Is it possible to save markup on a JS object to be retrieved later?

Why?

Here lies my problem, if a description is too long, I'd like to be able to break it into separate chunks, perhaps different HTML tags, as opposed to having the entire text in one long chain of words

ie: after looping through object...

 <div>{markup.description}</div>

the above would give me all the description data, but I wouldn't able to massage it (break into bold, italic, headings, or spans.) for a better UI.

So the end result that I'm trying to learn here is how to produce something like:

const markup = [
       {
         name: "<h1>Joe Doe<h1/>",
         food: "<p>pizza<p/>",
         description: "<h1>super long description<h2><p>bla bla 
         bla</p>"   
       }
    ]

I tried template literals but no dice.

I know I could separate chunks of text by adding more keys in the object, but that feels redundant because it is all a description, besides I still wouldn't be able to apply any styles (add a class) for words that need attention in the middle of the text.

vue... react... angular...is calling you... just kidding may not yet — Cody Geisler
– Cody Geisler, Commented Feb 3, 2018 at 2:16
I am using React. Just didn't mention because I thought this was broader (?). How would this work w/ React? — Null isTrue
– Null isTrue, Commented Feb 3, 2018 at 2:18
Depending on how long these really are, just put them in separate html files... and if they're not that long and you still want to put them in your code then make them their own react component — Cody Geisler
– Cody Geisler, Commented Feb 3, 2018 at 2:29

Michal · Accepted Answer · 2018-02-03 02:45:12Z

2

I guess you can always make the properties functions.

const markup = [{
  name: () => "<h1>Joe Doe<h1/>",
  food: () => "<p>pizza<p/>",
  description: () => "<h1>super long description<h2><p>bla bla bla</p>"
}]

function renderMarkup(item) {
  let markup = ''
  Object.entries(item).forEach(([key, value]) => {
    markup += value()
  });
  return markup
}

$('.markup').html(renderMarkup(markup[0]))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="markup"></div>

edited Feb 3, 2018 at 2:45

answered Feb 3, 2018 at 2:22

Michal

5,2738 gold badges35 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Null isTrue Over a year ago

Thank you for the insight! Do you mind showing me how the function would be written based on my example? I'm confused what goes where. I'm still a newbie....

net.uk.sweet Over a year ago

What are you gaining out of making the properties functions?

Michal Over a year ago

I am used to jsx and react but I guess you are right and in this particular example making the property a function is not really necessary.

Michal Over a year ago

renderMarkup is still valid though

JLRishe Over a year ago

@NullisTrue You should absolutely not be doing this if you're using React.

|

JLRishe · Accepted Answer · 2018-02-03 03:19:20Z

If you're using React and have JSX available, you can store JSX fragments in a variable and then reference them when you render. However, the markup you've written is very malformed. You have closing tags with the slash in the wrong place and you have an h1 matched up with an h2. JSX markup has to be valid, and each fragment has to be enclosed in a tag that contains the whole fragment.

This works:

const markup = [
  {
    name: <h1>Joe Doe</h1>,
    food: <p>pizza</p>,
    description: <div><h1>super long description</h1><p>bla bla bla</p></div>
  },
  {
    name: <h1>Janet Doe</h1>,
    food: <p>chicken</p>,
    description: <div><h1>yet another super long description</h1><p>bla bla bla</p></div>
  }
];

const App = () => (
  <div>
    { markup.map(r => [r.name, r.food, r.description]) }
  </div>
);

Collectives™ on Stack Overflow

Save values of JS object as Markup

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related