Как добавить вывод json в таблицу html с помощью редактируемого tr, используя цикл

Вот как я это делаю с современным синтаксисом, основанным на примере go-oleg.

Я добавил несколько комментариев в код.

./ db / mongodb.js

 const MongoClient = require('mongodb').MongoClient
 const uri = 'mongodb://user:password@localhost:27017/dbName'
 let _db

 const connectDB = async (callback) => {
     try {
         MongoClient.connect(uri, (err, db) => {
             _db = db
             return callback(err)
         })
     } catch (e) {
         throw e
     }
 }

 const getDB = () => _db

 const disconnectDB = () => _db.close()

 module.exports = { connectDB, getDB, disconnectDB }
< blockquote>

./ index.js

 // Load MongoDB utils
 const MongoDB = require('./db/mongodb')
 // Load queries & mutations
 const Users = require('./users')

 // Improve debugging
 process.on('unhandledRejection', (reason, p) => {
     console.log('Unhandled Rejection at:', p, 'reason:', reason)
 })

 const seedUser = {
     name: 'Bob Alice',
     email: 'test@dev.null',
     bonusSetting: true
 }

 // Connect to MongoDB and put server instantiation code inside
 // because we start the connection first
 MongoDB.connectDB(async (err) => {
     if (err) throw err
     // Load db & collections
     const db = MongoDB.getDB()
     const users = db.collection('users')

     try {
         // Run some sample operations
         // and pass users collection into models
         const newUser = await Users.createUser(users, seedUser)
         const listUsers = await Users.getUsers(users)
         const findUser = await Users.findUserById(users, newUser._id)

         console.log('CREATE USER')
         console.log(newUser)
         console.log('GET ALL USERS')
         console.log(listUsers)
         console.log('FIND USER')
         console.log(findUser)
     } catch (e) {
         throw e
     }

     const desired = true
     if (desired) {
         // Use disconnectDB for clean driver disconnect
         MongoDB.disconnectDB()
         process.exit(0)
     }
     // Server code anywhere above here inside connectDB()
 })

./ users / index.js

 const ObjectID = require('mongodb').ObjectID

 // Notice how the users collection is passed into the models
 const createUser = async (users, user) => {
     try {
         const results = await users.insertOne(user)
         return results.ops[0]
     } catch (e) {
         throw e
     }
 }

 const getUsers = async (users) => {
     try {
         const results = await users.find().toArray()
         return results
     } catch (e) {
         throw e
     }
 }

 const findUserById = async (users, id) => {
     try {
         if (!ObjectID.isValid(id)) throw 'Invalid MongoDB ID.'
         const results = await users.findOne(ObjectID(id))
         return results
     } catch (e) {
         throw e
     }
 }

 // Export garbage as methods on the Users object
 module.exports = { createUser, getUsers, findUserById }
1
задан Patrick Q 16 January 2019 в 15:54
поделиться

2 ответа

var output = myJSON;  //from succss:function(myJSON)
  var html = '';
  $.each(output,function(key,value){
      html +='<tr>';
      html +='<td>'+ value.name + '</td>';
      html +='<td>'+ value.mobile + '</td>';
      html +='<td>'+ value.id + '</td>';
      html +='</tr>';
  });
$('.append_data tbody').append(html);
0
ответ дан Anonymous 16 January 2019 в 15:54
поделиться

Вы хотите что-то в этом роде?

Конечно, я не включил ваш исходный код в свой ответ, но достаточно просто скопировать и вставить. В моем примере я использую подход с использованием функциональных стилей, то есть использую curry , литералов шаблона и не говоря уже о функции map .

Я думаю, что все, что вам действительно нужно сделать в этом сценарии, - это передать таблицу и данные из функции AJAX success в предоставленную мной функцию рендеринга, я просто предполагаю, что данные, возвращаемые с сервера, представляют собой массив объектов.

// The HTML table.
const tbl = document.querySelector('.append_data');

// Some example data.
const dummyData = [
  {name: 'demo', mobile: '01748329', city: 'NY', edit: 'Something'},
  {name: 'test', mobile: '12345789', city: 'WA', edit: 'Something Else'}
];

// A function to produce a HTML table row as a string.
const template = d => `<tr>
    <td>${d.name}</td>
    <td>${d.mobile}</td>
    <td>${d.city}</td>
    <td>${d.edit}</td>
  </tr>`;

// A function that takes a table, returns a function to accept an arrya of objects.
// It will then add the relevant template(s) to the provided table. 
const render = tbl => d => tbl.innerHTML += d.map(i => template(i)).join('');

// Fire the render function. 
render(tbl)(dummyData);
<table class="append_data">
  <tr>
    <th>Name</th>
    <th>mobile</th>
    <th>city</th>
    <th>edit</th>
  </tr>
</table>

Редактировать

Я также использовал функции стрелок [ 1113] в моем первом примере приведена более дружественная для начинающих реализация.

// The HTML table.
var tbl = document.querySelector('.append_data');

// Some example data.
var dummyData = [
  { name: 'demo', mobile: '01748329', city: 'NY', edit: 'Something' }, 
  { name: 'test', mobile: '12345789', city: 'WA', edit: 'Something Else' }
];

// A function to produce a HTML table row as a string.
var template = function template(d) {
  return '<tr>' 
  + '<td>' 
  + d.name 
  + '</td>' 
  + '<td>' 
  + d.mobile 
  + '</td>' 
  + '<td>' 
  + d.city 
  + '</td>' 
  + '<td>' 
  + d.edit 
  + '</td>' 
  + '</tr>';
};

// A function that takes a table, returns a function to accept an arrya of objects.
// It will then add the relevant template(s) to the provided table. 
var render = function render(tbl) {
  return function (d) {
    return tbl.innerHTML += d.map(function (i) {
      return template(i);
    }).join('');
  };
};

// Fire the render function. 
render(tbl)(dummyData);
<table class="append_data">
  <tr>
    <th>Name</th>
    <th>mobile</th>
    <th>city</th>
    <th>edit</th>
  </tr>
</table>

Редактировать 2

Если я не ошибаюсь, вам необходимо удалить [ 115] для правильной работы с предоставленным мною кодом. В коде, который я предоставил, вы можете видеть, что мой код ожидает, что будет предоставлено object, и если вы используете JSON.stringify, то этот по существу преобразует объект в строку .. В этом случае этот код не будет работать ... Может быть, вам стоит немного больше прочесть о том, как использовать такие методы, как JSON.stringify & amp; JSON.parse .

0
ответ дан JO3-W3B-D3V 16 January 2019 в 15:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: