From d0abc3124a7a5a16d71a35e76c7247123a250b38 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Thu, 14 Jul 2016 15:23:16 +0200
Subject: [PATCH] Fixed array index not being rendered when an array item is an
 object or array

---
 src/JSONNode.js  | 26 ++++++++++++++------------
 src/develop.html |  2 +-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/JSONNode.js b/src/JSONNode.js
index df22689..b972360 100644
--- a/src/JSONNode.js
+++ b/src/JSONNode.js
@@ -30,12 +30,12 @@ export default class JSONNode extends Component {
     }
   }
 
-  renderJSONObject ({parent, field, value, onChangeValue, onChangeField}) {
+  renderJSONObject ({parent, index, field, value, onChangeValue, onChangeField}) {
     const childCount = Object.keys(value).length
     const contents = [
       h('div', {class: 'jsoneditor-node jsoneditor-object'}, [
         this.renderExpandButton(),
-        this.renderField(field, value, parent),
+        this.renderField(parent, index, field, value),
         this.renderSeparator(),
         this.renderReadonly(`{${childCount}}`, `Array containing ${childCount} items`)
       ])
@@ -58,12 +58,12 @@ export default class JSONNode extends Component {
     return h('li', {}, contents)
   }
 
-  renderJSONArray ({parent, field, value, onChangeValue, onChangeField}) {
+  renderJSONArray ({parent, index, field, value, onChangeValue, onChangeField}) {
     const childCount = value.length
     const contents = [
       h('div', {class: 'jsoneditor-node jsoneditor-array'}, [
         this.renderExpandButton(),
-        this.renderField(field, value, parent),
+        this.renderField(parent, index, field, value),
         this.renderSeparator(),
         this.renderReadonly(`[${childCount}]`, `Array containing ${childCount} items`)
       ])
@@ -90,9 +90,7 @@ export default class JSONNode extends Component {
     return h('li', {}, [
       h('div', {class: 'jsoneditor-node'}, [
         h('div', {class: 'jsoneditor-button-placeholder'}),
-        index !== undefined
-            ? this.renderReadonly(index)
-            : this.renderField(field, value, parent),
+        this.renderField(parent, index, field, value),
         this.renderSeparator(),
         this.renderValue(value)
       ])
@@ -103,13 +101,17 @@ export default class JSONNode extends Component {
     return h('div', {class: 'jsoneditor-readonly', contentEditable: false, title}, text)
   }
 
-  renderField (field, value, parent) {
-    const hasParent = parent !== null
-    const content = hasParent ? escapeHTML(field) : valueType(value)
+  renderField (parent, index, field, value) {
+    const readonly = !parent || index !== undefined
+    const content = !parent
+        ? valueType(value)        // render 'object' or 'array', or 'number' as field
+        : index !== undefined
+            ? index               // render the array index of the item
+            : escapeHTML(field)   // render the property name
 
     return h('div', {
-      class: 'jsoneditor-field' + (hasParent ? '' : ' jsoneditor-readonly'),
-      contentEditable: hasParent,
+      class: 'jsoneditor-field' + (readonly ? ' jsoneditor-readonly' : ''),
+      contentEditable: !readonly,
       spellCheck: 'false',
       onBlur: this.handleChangeField
     }, content)
diff --git a/src/develop.html b/src/develop.html
index c1babfa..43f2442 100644
--- a/src/develop.html
+++ b/src/develop.html
@@ -23,7 +23,7 @@
     'boolean': true,
     'null': null,
     'number': 123,
-    'object': {'a': 'b', 'c': 'd'},
+    'object': {'a': 'b', 'c': 'd', 'e': [{"first": true}, {"second": true}]},
     'string': 'Hello World'
   };
   editor.set(json);