CODEWITHSUNDEEP
javascriptreactjsobject
JohiOakey
JohiOakey

Reputation: 143

Object have data but when opened it's empty

Framework: React

So when I'm running the code below I console.log the objects. When looking at the first object is pushed to the array then it contains text but when looking at the array of objects afterward it's empty.

The index 5 that is marked should be the object being pushed in the array in the red rectangle.

How come?

The code

    const SplitHtml = () => {
  const string =
    '<p><strong>Add and edit text here. <a target="_blank" rel="noopener noreferrer" href="https://www.google.com">This is a link</a> Select text to format it.</strong></p><p>&nbsp;</p><p></p>'

  const stringArray = string.split(/(<[^>]+>)/)
  let textArray = []
  let object = {}

  for (let i = 0; i < string.length; i++) {
    console.log(i, object.text)
    if (stringArray[i] === undefined) break
    // Print out
    if (stringArray[i].startsWith("<") && object.text && object.text.length > 0) {
      console.log(i, " push")
      textArray = [...textArray, object]
    }
    // Elements
    else if (stringArray[i] === "<p>") {
      object.type = "text"
    } else if (stringArray[i] === "<h1>") {
      object.type = "headline"
      object.importance = "1"
    } else if (stringArray[i] === "<h2>") {
      object.type = "headline"
      object.importance = "2"
    } else if (stringArray[i] === "<h3>") {
      object.type = "headline"
      object.importance = "3"
    } else if (stringArray[i] === "<h4>") {
      object.type = "headline"
      object.importance = "4"
    } else if (stringArray[i] === "<h5>") {
      object.type = "headline"
      object.importance = "5"
    } else if (stringArray[i] === "<h6>") {
      object.type = "headline"
      object.importance = "6"
    } else if (stringArray[i].startsWith("<a")) {
      object.type = "link"
    }
    // Style
    else if (stringArray[i] === "<strong>") {
      object.bold = true
    } else if (stringArray[i] === "</strong>") {
      object.bold = false
    } else if (stringArray[i] === "<i>") {
      object.italic = true
    } else if (stringArray[i] === "</i>") {
      object.italic = false
    }
    // Text
    else if (!stringArray[i].startsWith("<")) {
      object.text = stringArray[i]
    }
  }
  console.log(textArray)
}

The screenshot

enter image description here

Upvotes: 0

Views: 1063

Answers (2)

JohiOakey
JohiOakey

Reputation: 143

I had to deep copy by using const pushObject = JSON.parse(JSON.stringify(object)) before I pushed that new pushObject into the array.

Otherwise, the old object was already referenced as stated in @a--m post below!

Upvotes: 1

a--m
a--m

Reputation: 4782

If you hover the info icon you will see this message: Value below was evaluate just now

What this means is that the console.log will render what the object value was by that time, but if you are mutating an object the value will change and when you open that object in the console it will reflect the current state.

See the following example:

enter image description here

The ref object is modified and when expanded it will show and match the current value.

Upvotes: 1

Related Questions