Cara mengirim data json ke halaman html di node js

Silakan temukan kode di bawah ini. Jenis konten tidak ada

$.ajax({
    url: 'http://localhost:3000/test/config',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({
      o: testJson
    }),
    // crossDomain: true,
    success: function (data) {
      alert('Success!')
    },
    error: function (jqXHR, textStatus, err) {
      //show error message
      alert('text status ' + textStatus + ', err ' + err)
    }
  });

Rute

app.post('/test/config', function (req, res) {
  console.log(req.body.o);
})

Saat Anda ingin menyimpan data antara server restart dengan Node, file JSON adalah pilihan yang sederhana dan nyaman. Apakah Anda sedang membaca file konfigurasi atau menyimpan data untuk aplikasi Anda, Node memiliki beberapa utilitas bawaan yang memudahkan untuk membaca dan menulis file JSON. Menggunakan file JSON di aplikasi Anda bisa menjadi cara yang berguna untuk mempertahankan data. Kami akan melihat beberapa metode berbeda untuk bekerja dengan file JSON

Dalam tutorial ini kita akan

• Baca data JSON dari disk
• Pelajari cara menggunakan modul

  const config = require("./config.json");
  

  _4 untuk berinteraksi dengan sistem file
• Pertahankan data ke file JSON
• Gunakan

  const config = require("./config.json");
  

  _5 dan

  const config = require("./config.json");
  

  6 untuk mengonversi data ke dan dari format JSON

Di akhir tutorial ini, Anda akan dapat bekerja dengan file JSON menggunakan modul

const config = require("./config.json");

Sasaran

Katakanlah Anda memiliki pelanggan. file json disimpan ke disk yang menyimpan catatan untuk pelanggan di toko Anda

Sebagai bagian dari aplikasi toko Anda, Anda ingin mengakses alamat pelanggan, lalu memperbarui jumlah pesanan setelah pesanan dilakukan

Dalam tutorial ini, kita akan melihat cara membaca dan menulis ke pelanggan kita. file json

{
  "name": "Mega Corp.",
  "order_count": 83,
  "address": "Infinity Loop Drive"
}

Prasyarat

Jam tangan. Baca/Tulis File JSON

Berinteraksi dengan file dengan fs

Mengakses file di Node dilakukan dengan modul fs asli, yang memberi Anda fungsi untuk menonton, membaca, dan menulis file bersama dengan banyak alat lain untuk bekerja dengan sistem file. Karena ini adalah modul asli, kami dapat memintanya dalam kode kami tanpa menginstalnya. Hubungi saja

const config = require("./config.json");

Modul

const config = require("./config.json");

Perilaku sinkron ini dapat berguna di beberapa tempat, seperti saat startup saat membaca file konfigurasi sebelum kode lain dijalankan, tetapi menjadi masalah besar saat digunakan di server web tempat semua permintaan yang masuk akan diblokir saat pembacaan file sinkron sedang berjalan. Untuk alasan ini, Anda biasanya ingin menggunakan versi asinkron dari fungsi

const config = require("./config.json");

Untuk membaca dan menulis file secara asinkron dengan

const config = require("./config.json");

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Kami juga akan menggunakan pembantu JSON global untuk mengonversi objek menjadi string JSON, dan string JSON menjadi objek

Baca file JSON

Cara paling sederhana untuk membaca file JSON adalah dengan memintanya. Meneruskan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

const config = require("./config.json");

Tetapi membaca file JSON dengan kebutuhan memiliki kelemahan. File hanya akan dibaca sekali; . Ini bagus untuk memuat data statis saat startup (seperti data konfigurasi). Tapi untuk membaca file yang berubah di disk, seperti pelanggan kami. json mungkin, kita perlu membaca file secara manual menggunakan asinkron

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Baca file dengan const fs = require("fs"); fs.readFile("./customer.json", "utf8", (err, jsonString) => { if (err) { console.log("File read failed:", err); return; } console.log("File data:", jsonString); }); _2

Untuk mengakses alamat pelanggan, kita perlu

• Baca data JSON dari file
• Parsing string JSON menjadi objek JavaScript

Untuk memuat data dari pelanggan. json, kami akan menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Jika file berhasil dibaca, isinya akan diteruskan ke callback

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

• /pelanggan. json adalah jalur relatif ke file

  const fs = require("fs");
  fs.readFile("./customer.json", "utf8", (err, jsonString) => {
    if (err) {
      console.log("File read failed:", err);
      return;
    }
    console.log("File data:", jsonString);
  });
  

  8 adalah parameter opsional untuk penyandian file yang sedang kita baca, ini dapat diabaikan. Jika tidak ditentukan, fungsi akan mengembalikan ________11______9 alih-alih

  const fs = require("fs");
  fs.readFile("./customer.json", "utf8", (err, jsonString) => {
    if (err) {
      console.log("Error reading file from disk:", err);
      return;
    }
    try {
      const customer = JSON.parse(jsonString);
      console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
    } catch (err) {
      console.log("Error parsing JSON string:", err);
    }
  });
  

  0

• const fs = require("fs");
  fs.readFile("./customer.json", "utf8", (err, jsonString) => {
    if (err) {
      console.log("Error reading file from disk:", err);
      return;
    }
    try {
      const customer = JSON.parse(jsonString);
      console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
    } catch (err) {
      console.log("Error parsing JSON string:", err);
    }
  });
  

  1 adalah fungsi panggilan balik yang dijalankan setelah file dibaca

Sekarang kita memiliki isi file sebagai string JSON, tetapi kita perlu mengubah string menjadi sebuah objek

Sebelum kita dapat menggunakan data dari callback dalam kode kita, kita harus mengubahnya menjadi objek.

const config = require("./config.json");

const config = require("./config.json");

Contoh ini menunjukkan membaca dan mem-parsing file JSON

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

Menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

const config = require("./config.json");

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

Sekarang kami memiliki representasi objek dari data di pelanggan kami. file json

Kami juga dapat membaca file secara sinkron menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

try {
  // Note that jsonString will be a  since we did not specify an
  // encoding type for the file. But it'll still work because JSON.parse() will
  // use .toString().
  const jsonString = fs.readFileSync("./customer.json");
  const customer = JSON.parse(jsonString);
} catch (err) {
  console.log(err);
  return;
}
console.log(customer.address); // => "Infinity Loop Drive"

Kita dapat menggunakan pengetahuan ini untuk membuat fungsi pembantu yang dapat digunakan kembali untuk membaca dan mengurai file JSON. Di sini kita membuat fungsi bernama

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

const config = require("./config.json");

const fs = require("fs");

function jsonReader(filePath, cb) {
  fs.readFile(filePath, (err, fileData) => {
    if (err) {
      return cb && cb(err);
    }
    try {
      const object = JSON.parse(fileData);
      return cb && cb(null, object);
    } catch (err) {
      return cb && cb(err);
    }
  });
}
jsonReader("./customer.json", (err, customer) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(customer.address); // => "Infinity Loop Drive"
});

Catatan tentang penyandian file

Baik

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

try {
  // Note that jsonString will be a  since we did not specify an
  // encoding type for the file. But it'll still work because JSON.parse() will
  // use .toString().
  const jsonString = fs.readFileSync("./customer.json");
  const customer = JSON.parse(jsonString);
} catch (err) {
  console.log(err);
  return;
}
console.log(customer.address); // => "Infinity Loop Drive"

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("Error reading file from disk:", err);
    return;
  }
  try {
    const customer = JSON.parse(jsonString);
    console.log("Customer address is:", customer.address); // => "Customer address is: Infinity Loop Drive"
  } catch (err) {
    console.log("Error parsing JSON string:", err);
  }
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Ini karena Node tidak, dan tidak bisa, menganggap konten seperti apa yang ada di dalam file. Bahkan jika Anda bisa. Untuk mengatasi kurangnya definisi ini, Node akan membaca byte file untuk byte dan mengembalikannya sebagai buffer yang tidak diinginkan yang dapat Anda proses sesuai keinginan

Jika Anda mengetahui konten file, dan dapat memberikan detail tersebut ke Node dalam bentuk argumen

try {
  // Note that jsonString will be a  since we did not specify an
  // encoding type for the file. But it'll still work because JSON.parse() will
  // use .toString().
  const jsonString = fs.readFileSync("./customer.json");
  const customer = JSON.parse(jsonString);
} catch (err) {
  console.log(err);
  return;
}
console.log(customer.address); // => "Infinity Loop Drive"

Menulis ke file dengan const fs = require("fs"); fs.readFile("./customer.json", "utf8", (err, jsonString) => { if (err) { console.log("File read failed:", err); return; } console.log("File data:", jsonString); }); 3

Menulis JSON ke sistem file mirip dengan membacanya. Kami akan menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Pertama, untuk menulis data ke file JSON, kita harus membuat string data JSON dengan

const config = require("./config.json");

Buat objek pelanggan dengan data kami di bawah ini, dan ubah menjadi string

const customer = {
  name: "Newbie Corp.",
  order_count: 0,
  address: "Po Box City"
};
const jsonString = JSON.stringify(customer);
console.log(jsonString);
// => "{"name":"Newbie Co.","address":"Po Box City","order_count":0}"

Catatan. Jika Anda mencoba menulis objek ke file tanpa merangkainya, file Anda akan kosong dan terlihat seperti ini

[object, object]

Setelah data dirangkai, kita dapat menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

Berikut adalah contoh penulisan file JSON dengan const fs = require("fs"); fs.readFile("./customer.json", "utf8", (err, jsonString) => { if (err) { console.log("File read failed:", err); return; } console.log("File data:", jsonString); }); 3

const fs = require('fs')
const customer = {
    name: "Newbie Co.",
    order_count: 0,
    address: "Po Box City",
}
const jsonString = JSON.stringify(customer)fs.writeFile('./newCustomer.json', jsonString, err => {
    if (err) {
        console.log('Error writing file', err)
    } else {
        console.log('Successfully wrote file')
    }
})

Dan itu saja. Setelah panggilan balik berjalan, file telah ditulis ke disk. Catatan. kami hanya melewati objek kesalahan; . Kami juga dapat menulis file secara sinkron dengan cara yang sama menggunakan

const fs = require("fs");

function jsonReader(filePath, cb) {
  fs.readFile(filePath, (err, fileData) => {
    if (err) {
      return cb && cb(err);
    }
    try {
      const object = JSON.parse(fileData);
      return cb && cb(null, object);
    } catch (err) {
      return cb && cb(err);
    }
  });
}
jsonReader("./customer.json", (err, customer) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(customer.address); // => "Infinity Loop Drive"
});

const jsonString = JSON.stringify(customer)fs.writeFileSync('./newCustomer.json', jsonString)

Setelah file Anda selesai ditulis, akan terlihat seperti ini

const config = require("./config.json");

Merangkai secara default menempatkan semua data Anda dalam satu baris. Opsional, Anda dapat membuat file keluaran dapat dibaca manusia dengan meneruskan jumlah spasi untuk diindentasi ke

const config = require("./config.json");

const config = require("./config.json");

Di atas, kami memberi tahu stringify untuk mengindentasi data dengan 2 spasi. Sekarang file keluaran Anda akan terlihat seperti ini

const config = require("./config.json");

Perbarui file JSON

Sekarang kita dapat membaca dan menulis file pelanggan kita, kita dapat menggunakannya sebagai database sederhana. Jika kita ingin mengupdate data dalam file JSON, kita dapat membaca isinya, mengubah data, dan kemudian menulis data baru kembali ke file

const config = require("./config.json");

Jelas bukan database paling efisien yang dapat Anda pilih, tetapi bekerja dengan file JSON seperti ini adalah cara sederhana untuk mempertahankan data dalam proyek Anda

Rekap

JSON adalah salah satu jenis data paling umum yang akan Anda kerjakan di Node, dan kemampuan membaca dan menulis file JSON sangat berguna. Anda telah mempelajari cara menggunakan

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

const fs = require("fs");
fs.readFile("./customer.json", "utf8", (err, jsonString) => {
  if (err) {
    console.log("File read failed:", err);
    return;
  }
  console.log("File data:", jsonString);
});

const config = require("./config.json");

Anda dapat menggunakan persyaratan untuk membaca file JSON saat memulai untuk mengurai file JSON secara sinkron dalam satu baris. Dan sekarang Anda dapat menggunakan file JSON sederhana sebagai penyimpanan data

Jika Anda ingin mempelajari lebih lanjut, Anda dapat membaca tentang apa sebenarnya JSON itu, dan mengetahui lebih lanjut tentang kode sinkron vs asinkron

Bagaimana cara menampilkan data JSON dalam HTML menggunakan node JS?

Bagaimana cara memasukkan data JSON ke halaman HTML saya?

Bagaimana cara mengirim data dari node js ke halaman HTML?

Bagaimana cara mengirim data JSON dari node js?